Angular Academy · レッスン

単一スロットのコンテンツプロジェクション

Q: 「単一スロットのコンテンツプロジェクション」で何を学びますか？

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

ng-contentでコンテンツをプロジェクションします

レッスン 1/413 ステップ

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

コンテンツプロジェクションとは

コンテンツプロジェクションを使うと、コンポーネントは親からマークアップを受け取り、自身のテンプレート内に表示できます。これは、Webコンポーネントにおける「スロット」に相当するAngularの機能です。

親はコンポーネントのタグの間にコンテンツを記述し、コンポーネント側がそのコンテンツを表示する場所を決定します。

必要な理由

カード、ダイアログ、パネルなどの再利用可能なラッパーは、あらかじめ内容を知ることができません。コンテンツプロジェクションによって、これらを柔軟なコンテナにできます。

カードを一度作成し、どのような内容でも配置する
レイアウトのロジックをコンポーネントに保持する
内容を利用側に保持する

ng-content要素

<ng-content>要素は、プロジェクションされたコンテンツを配置する場所を示します。シングルスロット構成では、select属性を持たない<ng-content>を1つだけ使用します。

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

コンポーネントの使用

親がコンポーネントのタグの間に配置したものはすべて、スロットにプロジェクションされます。

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

シングルスロット＝1つの出口

名前のないシングルスロットでは、プロジェクションされたすべてのノードが1つの<ng-content>に入ります。フィルタリングは行われず、順序は親が記述したとおりに完全に保持されます。

デフォルトコンテンツ

<ng-content>の内部にフォールバック用のマークアップを配置できます。現代のAngularでは、利用側からそのスロットに何もプロジェクションされなかった場合にのみ、このデフォルトコンテンツが表示されます。

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

プロジェクションされたコンテンツのスタイル設定

プロジェクションされたコンテンツは親のビューに属するため、カードのスタイルではなく親のスタイルが適用されます。カードからプロジェクションされたノードにアクセスするには、::ng-deepを控えめに使用するか、グローバルスタイルを利用します。

コンテンツとビュー

Angularでは、コンテンツ子（プロジェクションされた子）とビュー子（テンプレートで宣言された子）を区別します。これは、contentChildとviewChildのようなクエリで重要になります。

icon = contentChild(IconComponent);

ライフサイクル：ngAfterContentInit

プロジェクションされたコンテンツは、ngAfterContentInit()の実行後に利用できるようになります。コンテンツ子を安全に読み取るには、これ（またはngAfterContentChecked）を使用します。

ngAfterContentInit() {
  console.log('Projected content ready');
}

実際のパネル例

再利用可能なパネルの完全な例を見てみましょう。内部の内容は利用側が完全に制御し、パネルは外枠を制御します。

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

よくある間違い

名前のない同じ<ng-content>を2回配置しても、コンテンツは複製されません。Angularは最後に一致したスロットにのみプロジェクションします。複数の領域が必要な場合は、マルチスロットプロジェクションを使用します。

理解度チェック

シングルスロットプロジェクションについての理解度を確認します。

対話的なレッスンで答える

まとめ

コンテンツプロジェクションでは、<ng-content>を使って親から提供されたマークアップをコンポーネント内に表示することを学びました。シングルスロットプロジェクションでは名前のない出口を1つ使用し、プロジェクションされたコンテンツは親のビューに属します。また、ngAfterContentInitで利用できるようになります。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 38
レッスン: 144

無料で学習を始めるコース全体を表示

よくある質問

「単一スロットのコンテンツプロジェクション」レッスンは無料ですか？

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

「単一スロットのコンテンツプロジェクション」で何を学びますか？

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

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

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

「単一スロットのコンテンツプロジェクション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Angular Academyに戻る