angualr-material

发表于

看angularmaterial的一些记录

ng-content, ng-template

ng-content

<ng-content></ng-content> 是一个内容投影的标签, 用来在组件标签位置插入组件包含内容, 它有一个select属性来选择投影内容, 从而可以再组件内不同位置插入指定内容

1
2
<ng-content></ng-content>
<ng-content select="mat-card-footer"></ng-content>

使用

1
2
3
4
5
6
7
8
9
// mat-card的模板内容
<mat-card>
  <p>
    插入无select属性的ng-content中
  </p>
  <mat-card-footer>
    插入select属性与其对应的ng-content中
  </mat-card-footer>
</mat-card>

ng-template

<ng-template></ng-template> 是一个模板插件

1
2
3
4
5
<ng-template // 这里插入其他的模板内容
    [ngTemplateOutlet]="template" // 模板名
    [ngOutletContext]="{ name: name }" // 上下文对象
  >
  </ng-template>

mat-ripple

涟漪效果