Angular4の子コンポーネントから親の複数のプレースホルダを取り込みます

Question

親コンポーネントでは、子のhtmlを表示するのにうまく動作する<router-outlet>を使用しています。

子供が親コンポーネントの他の部分も指定できるようにするにはどうすればよいですか？

これは私が試したことですが、すべてがrouter-outletプレースホルダでレンダリングされます。

親コンポーネント：

<header> 
    ... 
    <div #myheader></div> 
</header> 
<router-outlet></router-outlet> 

子コンポーネント：

<div #myheader> [Some HTML to be shown inside #myheader placeholder in parent] </div> 
<div> [Rest of my html to be shown under router-outlet in parent</div> 

子コンポーネントがいずれかの側にパディングの多くを取得しますが、ヘッダーがいっぱい走るので、私はこれを行うために必要な理由は、これは、各子コンポーネント内の子相対サブヘッダーを指定するだけでは簡単ではありません。

Answer 1

ページヘッダーのプロパティを持つサービスを構築することを検討してください。

ParentComponentはサービスにアクセスして、プロパティにバインドできます。

各ChildComponentは必要に応じてプロパティを設定できます。

私はここでの例のサービスがあります。

サービス

import { Injectable } from '@angular/core'; 

    @Injectable() 
    export class HeaderService { 
     headerText: string; 
    } 

親コンポーネント

export class ParentComponent { 

    get header():string { 
    return this.headerService.headerText; 
    } 

    constructor(public headerService: HeaderService) { } 
} 

： https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

コードは次のようになります

親HTML

<header> 
    ... 
    <div>{{ header }}</div> 
</header> 
<router-outlet></router-outlet> 

子コンポーネント

export class ChildComponent { 

    constructor(public headerService: HeaderService) { 
    this.headerService.headerText = ''; // <- Header text here 
    } 
}