Angular 2マテリアルトランスクルージョン、セレクター、および属性ディレクティブ

lachlan.p.jordan

私は現在、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]

編集
0

コメントを追加

0

関連記事

分類Dev

Angularディレクティブ-トランスクルージョンの利用

分類Dev

Angular 2トランスクルージョン、ディレクティブコンテンツを「alt」に

分類Dev

Angularの兄弟ディレクティブ/コントローラー関連リスト(およびマスター/詳細)

分類Dev

セッションデータを他のAngularディレクティブおよびコントローラーと同期する

分類Dev

Angularの子ディレクティブにトランスクルージョンできますか?

分類Dev

Angular2ディレクティブ、コンストラクターとonInit

分類Dev

Angular-マテリアル。オートコンプリートディレクティブ

分類Dev

ディレクティブテンプレートAngularからモジュールにアクセスできません

分類Dev

Angularのネストされたディレクティブを介してトランスクルージョンを渡す方法は?

分類Dev

Angular-ディレクティブのコンパイル後にコントローラーメソッドにアクセスできません

分類Dev

Angularディレクティブテスト-エラー:[$ injector:modulerr]モジュールのインスタンス化に失敗しましたか?

分類Dev

スペックのAngularコンポーネント内の属性ディレクティブにどのようにアクセスしますか?

分類Dev

親テンプレート内の子ディレクティブをレンダリングする場所をAngularに指示する方法(複数のトランスクルージョン)?

分類Dev

Angular JSとディレクティブリンクおよび$ timeout

分類Dev

スコープ関数をクローン(およびコンパイル済み)angularディレクティブに渡します

分類Dev

トランスクルージョンされた要素を含むAngularディレクティブ+ RequireJSが機能しない

分類Dev

Angularルーターリンクアクティブネストメニュー

分類Dev

Kendo UI Angular2 +チャート-シリーズツールチップテンプレート-カテゴリ値およびその他のデータへのアクセス

分類Dev

ディレクティブリンクでAngular $ scopeコントローラーにアクセスする方法は?

分類Dev

Angular2、現在のアクティブコンポーネントセレクターを取得して、cssスタイリングのクラスとしてグローバルに使用する方法

分類Dev

Angular1.3:再帰ディレクティブテンプレート内のアクセスコントローラー関数?

分類Dev

コントローラにアクセスするAngularディレクティブ-奇妙な「ungoogled」メッセージ

分類Dev

クラス図Angular2、インジェクションおよびルーティングの使用時の関連付けまたは依存関係

分類Dev

PlayFrameworkアプリケーション内のAngularディレクティブ

分類Dev

分度器テストでAngularディレクティブ/コンポーネントインスタンスにアクセスする

分類Dev

Angularディレクティブのオプションパラメータ

分類Dev

Angular1.5カスタムディレクティブセット-クリック後のダーティ

分類Dev

コンポーネントNgModelにアクセスするAngular4 +ディレクティブ

分類Dev

サブディレクトリを提供しようとしているサブルート、Angular2およびExpressへのルーティングの問題

Related 関連記事

  1. 1

    Angularディレクティブ-トランスクルージョンの利用

  2. 2

    Angular 2トランスクルージョン、ディレクティブコンテンツを「alt」に

  3. 3

    Angularの兄弟ディレクティブ/コントローラー関連リスト(およびマスター/詳細)

  4. 4

    セッションデータを他のAngularディレクティブおよびコントローラーと同期する

  5. 5

    Angularの子ディレクティブにトランスクルージョンできますか?

  6. 6

    Angular2ディレクティブ、コンストラクターとonInit

  7. 7

    Angular-マテリアル。オートコンプリートディレクティブ

  8. 8

    ディレクティブテンプレートAngularからモジュールにアクセスできません

  9. 9

    Angularのネストされたディレクティブを介してトランスクルージョンを渡す方法は?

  10. 10

    Angular-ディレクティブのコンパイル後にコントローラーメソッドにアクセスできません

  11. 11

    Angularディレクティブテスト-エラー:[$ injector:modulerr]モジュールのインスタンス化に失敗しましたか?

  12. 12

    スペックのAngularコンポーネント内の属性ディレクティブにどのようにアクセスしますか?

  13. 13

    親テンプレート内の子ディレクティブをレンダリングする場所をAngularに指示する方法(複数のトランスクルージョン)?

  14. 14

    Angular JSとディレクティブリンクおよび$ timeout

  15. 15

    スコープ関数をクローン(およびコンパイル済み)angularディレクティブに渡します

  16. 16

    トランスクルージョンされた要素を含むAngularディレクティブ+ RequireJSが機能しない

  17. 17

    Angularルーターリンクアクティブネストメニュー

  18. 18

    Kendo UI Angular2 +チャート-シリーズツールチップテンプレート-カテゴリ値およびその他のデータへのアクセス

  19. 19

    ディレクティブリンクでAngular $ scopeコントローラーにアクセスする方法は?

  20. 20

    Angular2、現在のアクティブコンポーネントセレクターを取得して、cssスタイリングのクラスとしてグローバルに使用する方法

  21. 21

    Angular1.3:再帰ディレクティブテンプレート内のアクセスコントローラー関数?

  22. 22

    コントローラにアクセスするAngularディレクティブ-奇妙な「ungoogled」メッセージ

  23. 23

    クラス図Angular2、インジェクションおよびルーティングの使用時の関連付けまたは依存関係

  24. 24

    PlayFrameworkアプリケーション内のAngularディレクティブ

  25. 25

    分度器テストでAngularディレクティブ/コンポーネントインスタンスにアクセスする

  26. 26

    Angularディレクティブのオプションパラメータ

  27. 27

    Angular1.5カスタムディレクティブセット-クリック後のダーティ

  28. 28

    コンポーネントNgModelにアクセスするAngular4 +ディレクティブ

  29. 29

    サブディレクトリを提供しようとしているサブルート、Angular2およびExpressへのルーティングの問題

ホットタグ

アーカイブ