Question

我目前正在寻找角度材料2的github和docs。

我正在尝试根据这些材料组件的结构为我的应用程序建立自己的组件。

我想知道组件中的某些选择包含多个选择器的原因。例如，我正在查看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材质转换，选择器和属性指令

1 个答案: