コンポーネントにplacholderを作成する

Question

Angular 4では、ユーザーが内部でカスタムコンテンツを定義できるようにするコンポーネントを実装する必要があるとします。

例：

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
}) 

そして、そのコンポーネントの使用目的は、そのようなものになるだろう：

<main-navigation> 
    <router-outlet></router-outlet> <!-- <- this is some user content --> 
</main-navigation> 

角度4で、このようなプレースホルダを作成する最も簡単な方法は何ですか？

Answer 1

ここに内部に<ng-content></ng-content>を追加しますか？

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <ng-content></ng-content> <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
}) 

これはおそらく、ユーザーが<main-navigation> </main-navigation>タグの間で置く他のどんなとともに<router-outlet></router-outlet>を追加する必要があります。それがあなたが望む振る舞いであるかどうかは正確には分かりませんが、それ以上のことを明確にすれば、私の答えを再評価することができるかもしれません。

Answer 2

@amalのさらなる発展として、

プレースホルダ、可能なアプローチの一つに選ばれているしたい場合は以下の通りです：次に

... 
<ng-content select="content"></ng-content> 
... 

、あなたが行うことができます：

<main-navigation> 
    <content> 
     <router-outlet></router-outlet> 
    </content> 
</main-navigation> 

クレジットをthis awesome postに。