Angular 2 RC 4-哈希定位策略不再起作用 [英] Angular 2 RC 4 - hashlocationstrategy no longer working

问题描述

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

We have upgraded our Angular 2 project to Release Candidate 4.

我们正在使用HashLocationStrategy来刷新浏览器中的页面(使用BrowserSync). 但是，对于RC4，此功能不再起作用. 没有组件加载到路由器出口. 但是，使用菜单项的routerlink确实可以.

We are using HashLocationStrategy to be able to refresh a page in the browser (using BrowserSync). But with RC4 this no longer works. No component is loaded into the routeroutlet. However, using the routerlink of a menu item does work.

RC4的HashLocationStrategy是否损坏，或者我们没有正确使用它? 我们尚未在互联网上找到任何信息. (现在只是试图通过Angular2源代码找到我们的方法，以了解正在发生的事情)

Is the HashLocationStrategy for RC4 broken, or are we not using it correctly? We haven't found any information on the Internet yet. (right now just trying to find our way through the Angular2 source code to find out what is going on)

更新:这是代码.

此外，我们似乎找不到找到使默认路由正常工作的方法. 尝试了如下所示的空路径，然后尝试了重定向...似乎没有触发任何默认路由将组件加载到路由出口的问题.

Also, we can't seem to find a way to get a default route working. Tried the empty path as seen below, tried the redirect...nothing seems to trigger a default route that will load a component into the route-outlet.

// 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]导航到视图时，路由器出口将充满正确的组件.例如，当导航到自动"时.

When I navigate to a view by clicking on a link and using [routerLink], then the router-outlet gets filled with the correct Component. For instance when navigating to 'auto'.

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

但是，例如，当我刷新自动"页面时，路由器插座将变为空.

But when I for instance refresh the 'auto' page, the router-outlet becomes empty.

推荐答案

在Angular 2 rc4中，似乎LocationStrategy已从路由器移动到通用路由器.您必须从那里导入它.

In Angular 2 rc4, it appears LocationStrategy has been moved from router to common. You'll have to import it from there.

还请注意提供"行周围的大括号.

Also note the curly brackets around the 'provide' line.

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时，可以在app.module.ts中实现Hashlocationstrategy作为一个选项.

In rc.5 this is changed again because of the major changes to main.ts. Hashlocationstrategy is now implemented in app.module.ts as an option when importing the RouterModule.

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

2.0.0:app.module.ts

在Angular 2.0.0(=发行版)中，Hashlocationstrategy保留在app.module.ts中，但措辞有所变化.现在正坐在供应商那里.

In Angular 2.0.0 (= release version) Hashlocationstrategy stayed in app.module.ts, but the phrasing changed a little bit. It's now sitting with the providers.

...
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},
  ]
})

这篇关于Angular 2 RC 4-哈希定位策略不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！