Angular 2 Включение материалов, селекторы и директивы атрибутов

В настоящее время я просматриваю github и документы для углового материала 2.

Я пытаюсь создать свои собственные компоненты для своего приложения, следуя структуре этих материальных компонентов.

Меня интересуют причины, по которым некоторые выборки внутри компонента содержат несколько селекторов. Например, я смотрю мат-карту на github и, что более важно, мат-карту-заголовок.

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

Выше приведен html для заголовка mat-card-header, который можно увидеть здесь: 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]?


angular angular-material2 transclusion
person lachlan.p.jordan    schedule 07.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Преимуществом является надежная библиотека компонентов для пользователей вашего пакета.

В примере 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>
person Narm    schedule 07.04.2018