1

Pages私は個人的に、他のコンポーネントとは異なるコンポーネントを に注入したいと考えてPages/Componentsいheaderます。たとえば、Input検索フィールドを my からcontent-componentコンポーネントheaderに挿入したいとします。で試しましたが、これは myで my をng-Content複製するだけです。問題は、私が個々にではなく、私の中にあることです。headerHTMLheaderComponentapp.component

私のヘッダーコンポーネント: 

<div class="header__sub">
<div class="header__title header__title--sub">
    <h2 class="title title--medium">{{ subtitle }}</h2>
</div>
<div class="header__search">
    <!-- Here should be my Input field -->
    <ng-content></ng-content>
</div>

入力フィールドを挿入したいのコンポーネント:

<app-header>
   <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" />
   </mat-form-field>
</app-header>  
 ....

App-Component.html:

<mat-drawer-content>
    // The header
    <app-header-sub>
    </app-header-sub>
    <div class="content__inner">
        // My Content
        <router-outlet></router-outlet>
    </div>
</mat-drawer-content>

各コンポーネントから個別に異なるタグをheader(機能を使用して) 挿入するにはどうすればよいですか?

4

1 に答える 1

1

次のように使用できます。

子コンポーネント

<div class="header">
  <ng-content select="[name]"></ng-content>
<div>

親コンポーネント

<app-header>
  <div name>Hello World</div>
</app-header>

参照用のデモ: https://stackblitz.com/edit/ng-content-select-attribute

またはこちらをご覧ください:複数の ng-content

于 2020-01-07T15:39:25.777 に答える