Как передать содержимое между селекторами угловых дочерних компонентов

Question

Я пытаюсь передать данные в селекторы угловых компонентов, как это делается в материале Angular или в MD Bootstrap. Ниже приведен пример простой карты угловых материалов, которая отображает содержимое между селекторами, вложенными в карту.

<mat-card>Simple card</mat-card>

Выходные данные будут такими: image

Я пытаюсь повторить то же самое, объявив дочерний компонент с контейнером, а содержимое должно быть помещено между дочернимСелектор компонентов.

child.component.html

<div class=container></div>

child.component.ts

@Component({
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.css']
 })

parent.component.html

<app-container> I am inside the container </app-container>

Это не работает так же, как карта материалов, и текст, отображаемый при его выборе с помощью селекторов компонентов, не отображается.

Answer 1

Вы должны использовать угловую проекцию контента, используя ng-content.используйте его следующим образом:

<div class=container>
  <ng-content></ng-content>
</div>

Если вы хотите передать несколько содержимого, вы можете использовать атрибут select в ng-content, чтобы выбрать определенный элемент, используя имя тега, имя класса или имя идентификатора.

app.component.html

<app-container> 
  <header>Welcome</header>
  <p class="message">Hi, how are you</p>
  <footer>Copyright</footer>
</app-container>

parent.component.html

<div class=container>
  <header>
   <ng-content select="header"></ng-content>
  </header>
  <section>
    <ng-content select="p.message"></ng-content>
  <section>
  <footer>
     <ng-content select="footer"></ng-content>
  </footer>
</div>