Question

我最近遇到过角材料模块，我对角材料如何在同一个地方在彼此内部使用多个组件感到困惑。

<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>

事物如何以这种嵌套方式工作。我需要了解这些多个组成部分如何完成工作。

Answer 1

使用ng-content 支持select属性，该属性使您可以在特定位置投影特定内容。此属性采用CSS选择器（my-element，.my-class，[my-attribute]等）来匹配所需的子代。

<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>

在您的mat-drawer-container.html内部使用ng-content

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

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

1 个答案: