0Pricing
Angular Academy · レッスン

selectによるマルチスロットプロジェクション

コンテンツを名前付きスロットにプロジェクションします

「selectによるマルチスロットプロジェクション」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

複数のスロット

多くのコンポーネントには、ヘッダー、本文、フッターなど複数の領域が必要です。Angularでは、<ng-content>のselect属性を使ったマルチスロットプロジェクションでこれを実現できます。

select属性

selectにはCSSセレクターを指定します。それぞれの<ng-content select="...">には、そのセレクターに一致するノードだけがプロジェクションされます。

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

属性による選択

属性セレクターは、利用側のマークアップで読みやすいため、最も一般的なパターンです。

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

名前付きスロットの利用

利用側では、一致する属性を付けて各コンテンツにタグ付けします。

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

要素またはクラスによる選択

要素名またはCSSクラスで選択することもできます。

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

キャッチオールスロット

selectを指定しない<ng-content>は、名前付きスロットに一致しなかったすべての要素を受け取ります。フォールバックとして最後に配置してください。

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

順序が重要

Angularはテンプレートの順序でスロットを評価します。プロジェクションされた各ノードは、最初に一致したスロットに入ります。キャッチオールがすべてを取り込まないよう、特定のセレクターの後に配置してください。

セレクターの組み合わせ

CSSセレクターは組み合わせることができます。たとえば、select="button[primary]"は、primary属性を持つbutton要素を対象にします。

<ng-content select="button[primary]"></ng-content>

レイアウトコンポーネント

ヘッダー、本文、フッターのスロットとキャッチオールを備えたカードの例を見てみましょう。

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

各ノードは1回だけプロジェクションされる

プロジェクションされた各ノードは1つのスロットにのみ一致し、正確に1回だけ表示されます。プロジェクションによって同じノードを2つのスロットに複製することはできません。

スロットごとのスタイル設定

各スロットは別々のDOM位置に存在するため、スロットをスタイル付きのコンテナ（ヘッダーやフッター）で囲み、各領域に固有の外観を与えることができます。

理解度チェック

マルチスロットプロジェクションについての知識を確認します。

まとめ

<ng-content select="...">を使ってマルチスロットコンポーネントを作成する方法を学びました。セレクターでは属性、要素、クラスを対象にできます。選択されていないスロットがキャッチオールとなり、順序によってどのスロットが選ばれるかが決まります。

よくある質問

「selectによるマルチスロットプロジェクション」レッスンは無料ですか？

はい。「selectによるマルチスロットプロジェクション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「selectによるマルチスロットプロジェクション」で何を学びますか？

コンテンツを名前付きスロットにプロジェクションします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「selectによるマルチスロットプロジェクション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 単一スロットのコンテンツプロジェクション
  2. selectによるマルチスロットプロジェクション
  3. ng-templateとng-container
  4. TemplateRefとViewContainerRef
← Angular Academyに戻る