我希望自己的页面将与其他页面/组件不同的组件注入到页眉中。例如,我想将输入搜索字段从内容组件注入到标题组件Component中。我尝试使用ng-Content,但这只会在HTML中复制我的标头。问题是我的标头不在每个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>
....
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>
如何从每个组件分别将不同的标签注入标头(具有功能)?
您可以这样使用它:
子组件
<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