角度2 - 別のルートへの切り替え/別のページ（初心者レベル）

Question

が解決する場合、ヘッダーを変更する方法

私はいくつかのコンポーネントがあります。 - 家庭用コンポーネント、デフォルトのヘッダー、詳細コンポーネント、詳細ヘッダーコンポーネント
を両方のヘッダ異なるレイアウト

レッツは、それが「ディテールヘッダー」

が表示されますので、私のロジックがで他の場合には、いくつかの を行うことです詳細ページで
すると、ユーザー、それはデフォルトのヘッダー」を表示し、[ホーム]ページで言っていますapp.component.ts 残念ながら、期待どおりに表示されません。
Angular2での操作方法は？ヘッダーを切り替えるのに問題があります。

これは私のapp.component.tsある

@Component({ 
    selector: 'app-root', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: ['./main.css'], 
    template: ` 
    <div class="main-body"> 
     <app-header *ngIf="!showHeaderB()"></app-header> 
     <detail-header *ngIf="showHeaderB()"></detail-header> 
     <div class="container"> 
     <small><api-error></api-error></small></div> 
     <router-outlet></router-outlet> 
     </div> 
     <app-footer></app-footer> 
     <template ngbModalContainer></template> 
    </div> 
    ` 
}) 

export class AppComponent { 
    showHeaderB(){ 
    if (this.router.url.startsWith('/detail/')) { 
     return true; 
    } else { 
     return false; 
    } 
    } 
} 

Answer 1

は、別の成分として、ページのヘッダーを持っています。

@Component({ 
    selector: 'page-header', 
    template: ` 
    <div> {{title}}</div> 
    `, 
}) 
export class PageHeader { 

    @Input() title:string=""; 

} 

各コンポーネントには、そのコンポーネントを含めてタイトルを割り当てる必要があります。

@Component({ 
    selector: 'component-1', 
    template: ` 
    <div> 
     <page-header title="pageTitle"> </page-header> 
     ... 
    </div> 
    `, 
}) 

export class Component1 { 

pageTitle:string; 

} 

@Component({ 
    selector: 'component-2', 
    template: ` 
    <div> 
     <page-header title="pageTitle"> </page-header> 
     ... 
    </div> 
    `, 
}) 

export class Component2 { 

pageTitle:string; 

}