1

初めまして、変なタイトルですみません。より良い要約が見つかりませんでした。

だから私が欲しいのは、基本的な 3 つの部分の構造 (ヘッダー/コンテンツ/フッター) で構成されるアプリケーションを作成することです。アクティブなルートに応じて、ヘッダー部分を変更する必要があります (すべてのヘッダーは独自のコンポーネントです)。

これまでのところ、表示されるヘッダーは「mainApp.component」の [ngSwitch] ステートメントによって決定され、次のようになります。

<span [ngSwitch]="currentLocation">
    <span *ngSwitchWhen="'/login'"><login-header></login-header></span>
    <span *ngSwitchWhen="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>

「mainApp.component.ts」は次のようになります。

import { Component, OnInit } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {HomeHeaderComponent} from './home-header';
import {LoginHeaderComponent} from './login-header';
import {FooterComponent} from './footer';
import {Router} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'mainApp.component.html',
  styleUrls: ['mainApp.component.css'],
  directives: [HomeHeaderComponent, LoginHeaderComponent, FooterComponent, ROUTER_DIRECTIVES],
  providers: []
})

export class mainApp implements OnInit {
  public currentLocation: string;
  constructor(public router: Router) {
    this.currentLocation = location.pathname;
  }

  ngOnInit() {

  }
}

これは、mainApp.component をレンダリングし、どちらが現在のルートであるかを確認し、それに応じてヘッダーを表示するため、自分localhost:4200/loginまたは手動で移動するとうまく機能します。localhost:4200/homeただし、たとえばボタンをクリックしてルートを変更すると、

<span class="btn btn-default headerButton homeButton" (click)="navigateToHome()"></span>

navigateToHome ()は単に

navigateToHome() {
  this.router.navigate(['/home']);
}

ヘッダーは、変更検出がルート変更を検討しないため、[ngSwitch] を再実行したり、mainApp.component を再レンダリングしたりしないため、同じままです。

それらが属するコンポーネントテンプレート内にヘッダーを含めることはすでに考えていましたが、メインコンポーネントでそれを行う方法があれば、それを好むでしょう。

これを解決する方法、またはそれをより良くする方法/別の方法/ベストプラクティスの方法について何か考えがあれば、私はそれを聞いてうれしいです.

ありがとう。

4

1 に答える 1

0

ここでの答えは、次のようにルーター イベントをサブスクライブすることです。

this.router.events.subscribe((e) => {e instanceof NavigationEnd? this.currentLocation = '/' + e.url.split('/')[1] : ''});

これは一般にルーター イベントをサブスクライブし、返された値の url プロパティをチェックして、ナビゲーションが正常に終了するたびに currentLocation 変数を変更します。

これを（この投稿の時点で）現在のルーターバージョン @angular/routerv3.0.0-alpha8 に実装しましたが、これは問題なく動作します。

于 2016-06-29T08:37:47.423 に答える