私は現在、Angular Material2のgithubとドキュメントを見ています。
これらのマテリアルコンポーネントがどのように構成されているかに従って、アプリ用に独自のコンポーネントを構築しようとしています。
コンポーネント内の一部の選択に複数のセレクターが含まれている理由について疑問に思っています。たとえば、私は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]
?
利点は、パッケージの採用者向けの堅牢なコンポーネントライブラリです。
この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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加