实现2个组件，并在内部使用两个组件，就像角材料对其组件所做的一样

Question

I have recently came across with the angular-material module and I am a bit confused about how angular-material could have multiple component used one inside the other at the same place.Like the below

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

How things work in this so nesting way. I need to know about how these multiple components contribute to accomplish the work.

Answer 1

Use ng-content supports a select attribute that lets you project specific content in specific places. This attribute takes a CSS selector (my-element, .my-class, [my-attribute], …) to match the children you want.

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

Inside your mat-drawer-container.html use ng-content

<ng-content select='mat-drawer'></ng-content>
<ng-content select='mat-drawer-content '></ng-content>