Angularでのコンテンツプロジェクションの簡素化

コンテンツ プロジェクションを使用すると、コンポーネントにシャドウ DOM を挿入できます。簡単に言うと、HTML 要素やその他のコンポーネントをコンポーネントに挿入する場合は、コンテンツ プロジェクションの概念を使用してそれを行います。Angularでは、ng-content >< </ng-content >を使用してコンテンツ プロジェクションを実現します。コンテンツプロジェクションを正しく使用することで、再利用可能なコンポーネントとスケーラブルなアプリケーションを作成できます。

コンテンツ プロジェクションを理解するために、次のコード リストに示すようにGreetComponentについて考えてみましょう。

import { Component } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    message: string = "Hello There !"
 
}

ここで、別のコンポーネントで GreetComponent を使用し、親コンポーネントから挨拶メッセージを渡す場合は、@Input()デコレータを使用する必要があります。このように、変更されたGreetComponnetは次のリストのようになります。

import { Component, Input } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    @Input() message: string;
 
}

@Input() デコレータを使用すると、単純な文字列を GreetComponnet に渡すことができますが、次のようなさまざまな種類のデータを GreetComponent に渡す必要がある場合はどうでしょうか。

1. Inner HTML
2. HTML Elements
3. スタイル付き HTML
4. その他のコンポーネントなど

スタイル設定された HTML または別のコンポーネントを渡すか、プロジェクトをするには、コンテンツ プロジェクションが使用されます。次のコードでコンテンツ プロジェクションを使用するように GreetComponent を変更してみましょう。

GreetComponentでコンテンツを投影するために使用しています。GreetComponent を使用すると、次に示すようにコンテンツを渡します。

上記のリストでは、スタイル付き HTML を GreetComponent に投影しており、次の出力が得られます。

これは、シングルスロットコンテンツプロジェクションの例です。GreetComponent に渡すものはすべて投影されます。そこで、以下のリストに示すように、複数の HTML 要素を GreetComponent に渡しましょう。

ここでは、3つのHTML要素をGreetComponentに渡しており、それらすべてが投影されます。次の画像に示すように、出力が表示されます。

DOM では、GreetComponent 内ですべての HTML 要素が投影されていることがわかります。

マルチスロットプロジェクション

コンポーネントの複数のスロットに要素を投影する必要がある場合があります。次の例では、次のようなグリーティング カードを作成するとします。

これは、次に示すようにコンポーネントを使用して作成できます。

たとえば、名前とボタンをGreetComponentに動的に渡すことができるように、header要素とbtn要素を渡す必要があるとします。 今回は、2つのスロットが必要です。

1. ヘッダー要素のスロット
2. btn 要素用のスロット

次の図に示すように、上記の要件に対応するように GreetComponent を変更してみましょう。

ここでは、ng-contentを2回使用しています。さて、問題は、h1要素を投影するために特定のng-contentを選択し、btn要素を投影するために別のng-contentを選択するかどうかです。

​ng-content > セレクターを使用して、投影する特定のスロットを選択できます。 セレクターには 4 つのタイプがあります。

1. タグセレクターを使用したプロジェクト
2. クラスセレクタを使用したプロジェクト
3. id セレクターを使用したプロジェクト
4. 属性セレクターを使用したプロジェクト

タグセレクターは、以下のリストに示すように、マルチスロットプロジェクションに使用できます。

次に、次のリストに示すように、コンテンツを GreetComponent に投影できます。

ご覧のとおり、GreetComponent を 2 回使用し、異なる h1 要素と button 要素を投影しています。次の図に示すように、出力が表示されます。

タグセレクタを使用する場合の問題は、すべてのh1要素がGreetComponentに投影されることです。多くのシナリオでは、それを望まない場合があり、次のリストに示すように、クラス セレクターや属性セレクターなどの他のセレクターを使用できます。

次に、次のリストに示すように、コンテンツを GreetComponent に投影できます。

上記と同じ出力が得られますが、今回はクラス名と属性を使用してコンテンツを投影しています。DOM 上の要素を調べると、次の図に示すように、投影された要素の属性名とクラス名が見つかります。

コンテンツプロジェクションは、コンポーネントにシャドウDOMを挿入するのに非常に便利です。HTML 要素またはその他のコンポーネントをコンポーネントに挿入するには、コンテンツ プロジェクションを使用する必要があります。AngularJS 1.X では、コンテンツの投影はトランスクルージョンを使用して実現されていましたが、Angularでは<ng-contentを使用して実現されます>

次の投稿では、Angular、より重要な概念について学びますので、ご期待ください。また、HTML5、Angular、React、ASP.NET MVCと一緒に使用してリッチなインターネットアプリケーションを作成できるIgnite UI for JavaScript/HTML5およびASP.NET MVCも忘れずにチェックしてください。すべてのJavaScriptコントロールの試用版を無料でダウンロードできます。