0

はじめに: 現在ビルドしているアプリケーションは 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
};

これまでの私のすべての努力は、実用的な解決策にはなりませんでした。カスタム 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);
    }
}

この部分は、次のようにボタンをクリックして別のルートに移動すると、親にデータを提供できます。

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オブジェクトcurrentRouteプロパティに渡して ngSwitch ステートメントを再実行し、正しいヘッダーを表示するにはどうすればよいですか?

4

1 に答える 1

1

これは、ルーターイベントを使用して処理できます。NavigationEndオブジェクトのイベント チェックにサブスクリプションを追加し、そこにロジックを移動します。

router.events.subscribe(e => { 
    if (e instance of NavigationEnd) 
    {
        ///your logic 
    }
});
于 2016-06-29T10:29:46.667 に答える