Angular2:提供到父组件的当前路由

Question

首先:我目前构建的应用程序是Angular2(RC3)应用程序(带有@angular/routerv3.0.0-alpha)。8个模块)。

这个应用由一个父组件组成，父组件包括不同的报头组件，这些组件应该根据当前路由进行选择。简而言之:

route: localhost:4200/login => display login header component,
route: localhost:4200/home => display home header component etc.

在父组件模板中有一个开关，如下所示:

<span [ngSwitch]="dataStore.currentRoute">
    <span *ngSwitchCase="'/login'"><login-header></login-header></span>
    <span *ngSwitchCase="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>

父组件中的dataStore定义为:

private dataStore: {
    currentRoute: string
};

到目前为止，我所有的努力都没有产生一个有效的解决方案。我尝试创建一个routeStore，它提供了一个自定义的Observable，看起来像这样:

@Injectable()
export class RouteStore {
    private dataStore: {
        currentRoute: string
    };
    private _currentRoute$: BehaviorSubject<string>;
    constructor(private routeHelper: RouteHelperService) {
        this.dataStore = {currentRoute: this.routeHelper.getCurrentBaseRoute()};
        this._currentRoute$ = <BehaviorSubject<string>>new BehaviorSubject(this.dataStore.currentRoute);
    }
    get currentRoute$() {
        return this._currentRoute$.asObservable();
    }
    public updateCurrentRoute() {
        this.dataStore = {currentRoute: this.routeHelper.getCurrentBaseRoute()};
        this._currentRoute$.next(this.dataStore.currentRoute);
    }
}

当我通过点击按钮导航到另一个路由时，这部分能够向父组件提供数据，例如:

userIconClick(userName: string) {
    this.router.navigate(['/home', userName]).then(() => this.routeStore.updateCurrentRoute());
  }

但是只要我刷新页面或初始化应用它就会抛出

Expression has changed after it was checked.

错误。

我还努力处理父组件内部的所有路由更改，只通过使用路由器，如

this.route.url.subscribe(urlPathArray => this.dataStore.currentRoute = '/' + urlPathArray[0].path);

没有得到一个可接受的结果，因为urlPathArray的path属性总是返回一个空字符串(意味着父组件的路由)。

如何将当前活动的路由传递给父组件dataStore objects currentRoute属性以重新运行ngSwitch语句并显示正确的报头?

Answer 1

这可以使用路由器事件来处理。为NavigationEnd对象添加一个订阅事件检查，并将逻辑移到那里

router.events.subscribe(e => { 
    if (e instance of NavigationEnd) 
    {
        ///your logic 
    }
});