1

我希望我的Pages个人将不同的组件从其他组件注入Pages/Components到header. 例如，我想将我的Input搜索字段注入content-component到我的header组件中。我试过了ng-Content，但这只会header在我的HTML. 问题是我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>

我想注入输入字段的组件：

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

应用组件.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 回答