Angular2：提供到 parent 组件的当前路径

Question

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

此应用程序由一个 parent 组件组成，其中包含不同的 header 组件，应根据当前路线选择。简而言之：

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

在 parent 组件模板中有一个如下所示的开关：

<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>

其中parent组件中的dataStore定义为：

private dataStore: {
    currentRoute: string
};

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

@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);
    }
}

当我通过单击按钮导航到另一条路线时，这部分能够向 parent 提供数据：

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

但是，一旦我刷新页面或初始化应用程序，它就会抛出

Expression has changed after it was checked.

错误。

我还努力仅通过使用

之类的路由器来处理 parent 组件内的所有路由更改

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

没有产生可接受的结果，因为 urlPathArray 的路径属性总是返回一个空字符串（意味着 parent 组件).

如何获取要传递给 parent 组件的当前活动路由 dataStore objects currentRoute 属性重新运行 ngSwitch 语句并显示正确的 header?

Answer 1

这可以使用路由器 events 来处理。添加对事件的订阅检查 NavigationEnd 对象并将您的逻辑移至那里

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

Angular2：提供到 parent 组件的当前路径

Angular2: provide current route to parent component

javascript

angular2-routing

angular2-components

angular