javascript - Angular，将来自组件的输入注入(inject)我的标题

Question

我希望我的 Pages 将来自其他 Pages/Components 的不同组件单独注入(inject)到 header 中。例如，我想从我的 content-component 中注入(inject)一个 Input 搜索字段到我的 header 组件中。我尝试使用 ng-Content，但这只会在我的 HTML 中复制我的 header。问题是我的 header 不在每个 Component 中，而是在我的 app.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>

I want to inject the input field 的组件:

<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 中注入(inject)不同的标签(具有功能)？

Answer 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

或者看这里:Multiple ng-content