Angular, введите ввод из компонента в мой заголовок

Я хочу, чтобы мой 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>

Component from 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 (с функциями)?


javascript angular components inject ng-content
person topas96    schedule 07.01.2020    source источник
comment
Вы не знаете. Используйте для этого сервис (@Injectable). Внедрите сервис в свой компонент и в свой заголовок. Установите значение для своего сервиса и получите его в заголовке.   -  person pascalpuetz    schedule 07.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать его так:

Дочерний компонент

<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

person Ling Vu    schedule 07.01.2020