首页 文章

Angular 2 RC 4 - hashlocationstrategy不再工作[重复]

提问于
浏览
3

这个问题在这里已有答案:

我们已将Angular 2项目升级为Release Candidate 4 .

我们正在使用HashLocationStrategy来刷新浏览器中的页面(使用BrowserSync) . 但是对于RC4,这已经不再适用了 . 没有组件被加载到routeroutlet中 . 但是,使用菜单项的routerlink确实有效 .

RC4的HashLocationStrategy是否已损坏,或者我们是否正确使用它?我们还没有在互联网上找到任何信息 . (现在只是想通过Angular2源代码找到我们的方法来找出发生了什么)

更新:这是代码 .

此外,我们似乎无法找到一种方法来使默认路由工作 . 尝试如下所示的空路径,尝试重定向...似乎没有触发将组件加载到路由出口的默认路由 .

// boot:

import {bootstrap} from '@angular/platform-browser-dynamic';

import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .catch(err => console.log(err));


// AppComponent:

import {Component, provide, ExceptionHandler} from '@angular/core';
import {HTTP_PROVIDERS, XHRBackend} from '@angular/http';
import {CORE_DIRECTIVES, LocationStrategy, HashLocationStrategy} from '@angular/common';
import {TranslatePipe, TranslateService, TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';

import {SideMenuComponent} from './navigatie/index';
import {AppSettingsService, Auth, MockBackendToggle} from './shared/index';
import {EssStorage} from './shared/ess-storage';
import {EssHttp} from './shared/ess-http';
import {DienstverbandService} from './dienstverband/shared/dienstverband.service';
import {HeaderMenuComponent} from './navigatie/headermenu/headermenu.component';
import {WerknemerService} from './werknemer/werknemer.service';
import {PersoonService} from './werknemer/persoon/shared/persoon.service';
import {RouterOutlet} from '@angular/router';
import {APP_ROUTER_PROVIDER} from './navigatie/routes';
import {AuthGuard} from './shared/auth/auth-guard';
import {EssExceptionHandler} from './shared/ess-exception-handler';


@Component({
    selector: 'ess-app',
    pipes: [TranslatePipe],
    directives: [CORE_DIRECTIVES, SideMenuComponent, HeaderMenuComponent, RouterOutlet],
    providers: [TRANSLATE_PROVIDERS, TranslateService, HTTP_PROVIDERS, EssHttp, WerknemerService, APP_ROUTER_PROVIDER, AuthGuard,
                AppSettingsService, Auth, DienstverbandService, PersoonService, provide(XHRBackend, {useClass: MockBackendToggle}),
                provide(LocationStrategy, {useClass: HashLocationStrategy}), provide(ExceptionHandler, {useClass: EssExceptionHandler})],
    template: `
    <div id='main'>
        <div class='header  hidden-xs' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <header>
                <ess-headermenu></ess-headermenu>
            </header>
       </div>

        <div class='ess-sidemenu-container visible-lg' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <ess-sidemenu></ess-sidemenu>
        </div>

        <div class='main-content-container col-lg-12'>
            <section> 
                <section id='content'>
                    <div>
                        <router-outlet></router-outlet>
                    </div>
                </section>
            </section>
        </div>
    </div>`
})
export class AppComponent { //..}

// routes:

import {provideRouter, RouterConfig} from '@angular/router';
import {DashboardComponent} from '../dashboard/index';
import {PersonaliaComponent} from '../werknemer/index';
import {LoginComponent} from '../login/index';
import {AuthGuard} from '../shared/auth/auth-guard';

export const appRoutes: RouterConfig = [
    {path: '',                      component: LoginComponent},
    {path: 'login/:url',            component: LoginComponent},
    {path: 'dashboard',             component: DashboardComponent},
    {path: 'personalia',            component: PersonaliaComponent,             canActivate: [AuthGuard]}
];

export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

更新:

当我通过单击链接并使用[routerLink]导航到视图时,路由器插座将填充正确的组件 . 例如,当导航到'auto'时 .

<li class="submenuitem" [routerLink]="['auto']"><a href="#"><span>{{'AUTO' | translate}}</span></a></li>

但是当我例如刷新“自动”页面时,路由器插座变空了 .

1 回答

  • 8

    在Angular 2 rc4中,似乎LocationStrategy已从路由器移动到公共端 . 你必须从那里导入它 .

    另请注意'provide'行周围的花括号 .

    rc4: main.ts

    // Imports for loading & configuring the in-memory web api
    import { XHRBackend } from '@angular/http';
    
    // The usual bootstrapping imports
    import { bootstrap }      from '@angular/platform-browser-dynamic';
    import { HTTP_PROVIDERS } from '@angular/http';
    
    import { AppComponent }         from './app.component';
    import { APP_ROUTER_PROVIDERS } from './app.routes';
    import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common';
    
    bootstrap(AppComponent, [
        APP_ROUTER_PROVIDERS,
        HTTP_PROVIDERS,
        {provide: LocationStrategy, useClass: HashLocationStrategy}
    ]);
    

    rc5: app.module.ts

    在rc.5中,由于main.ts的主要变化,这又被改变了 . 现在,在导入RouterModule时,Hashlocationstrategy在app.module.ts中实现 .

    @NgModule({
    imports: [routing, RouterModule.forRoot(routing,{ useHash: true })],
    

    2.0.0: app.module.ts

    在Angular 2.0.0(=发布版本)中,Hashlocationstrategy停留在app.module.ts中,但语法略有改变 . 它现在与供应商坐在一起 .

    ...
    import { LocationStrategy, HashLocationStrategy } from '@angular/common';
    ...  
    
    @NgModule({
      bootstrap: [AppComponent],
      imports: [
        //all your modules
      ],
      declarations: [
        //all your components
      ],
      providers: [
        //all your services
        {provide: LocationStrategy, useClass: HashLocationStrategy},
      ]
    })
    

相关问题