Angular 2 Material 包含、选择器和属性指令

Question

我目前正在查看 github 和 angular material 2 的文档。

我正在尝试按照这些 material 组件的结构为我的应用程序构建自己的组件。

我想知道组件中的某些选择包含多个选择器的原因。例如，我正在查看 github 上的 mat-card，更重要的是，mat-card-header。

<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
<div class="mat-card-header-text">
  <ng-content
      select="mat-card-title, mat-card-subtitle,
      [mat-card-title], [mat-card-subtitle],
      [matCardTitle], [matCardSubtitle]"></ng-content>
</div>
<ng-content></ng-content>

上面是mat-card-header的html，可以在这里看到：mat-card-header。

这是打字稿中的指令：

@Directive({
  selector: `mat-card-title, [mat-card-title], [matCardTitle]`,
  host: {
    'class': 'mat-card-title'
  }
})
export class MatCardTitle {}

拥有这 3 个选择器的好处或原因是什么。 mat-card-title、[mat-card-title]、[matCardTitle]?

Answer 1

好处是为您的包的采用者提供了一个强大的组件库。

在 mat-card-title 示例中，这允许用户以最适合其用例的方式使用指令。比如...

<mat-card-title>My Title</mat-card-title>
<div class="mat-card-title">My Title</div>
<div class="matCardTitle">My Title</div>
<div mat-card-title>My Title</div>

Angular 2 Material 包含、选择器和属性指令

Angular 2 Material transclusion, selectors and attribute directives

transclusion

angular-material2

angular