【初心者向け】Angular 6 で複数 ng-content を使ってコンポーネントをレベルアップ！

2024-04-02

Angular 6 での複数 ng-content の使い方

概要

<ng-content> 要素は、コンポーネントテンプレート内でコンテンツを投影するためのプレースホルダーとして機能します。
複数の <ng-content> 要素を使用すると、コンポーネントテンプレート内に複数のコンテンツ領域を作成できます。
コンテンツは、select 属性を使用して特定のコンテンツ領域に投影できます。
コンテンツは、ng-template 要素を使用して動的に投影できます。

例

以下は、複数の <ng-content> 要素を使用するシンプルなコンポーネントの例です。

@Component({
  selector: 'my-component',
  template: `
    <div>
      <ng-content select=".header"></ng-content>
      <ng-content select=".content"></ng-content>
      <ng-content select=".footer"></ng-content>
    </div>
  `
})
export class MyComponent {}

この例では、コンポーネントテンプレートには 3 つの <ng-content> 要素があります。

.header クラスを持つ要素は、最初の <ng-content> 要素に投影されます。

このコンポーネントを使用するには、次のようにテンプレート内でコンテンツを投影する必要があります。

<my-component>
  <div class="header">
    <h1>My Header</h1>
  </div>
  <div class="content">
    <p>This is the content.</p>
  </div>
  <div class="footer">
    <p>My Footer</p>
  </div>
</my-component>

select 属性を使用して、コンテンツを投影する要素をより細かく制御できます。
コンテンツプロジェクションは、コンポーネント間のデータ共有に使用できます。

詳細は、以下の Angular 公式ドキュメントを参照してください。

注意

複数の <ng-content> 要素を使用する場合は、コンテンツを適切に整理することが重要です。
コンテンツプロジェクションは、複雑なコンポーネントを作成する場合に役立ちますが、使い方を誤るとコードが読みづらくなる可能性があります。

my-component.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {}

<div>
  <ng-content select=".header"></ng-content>
  <ng-content select=".content"></ng-content>
  <ng-content select=".footer"></ng-content>
</div>

app.component.html

<my-component>
  <div class="header">
    <h1>My Header</h1>
  </div>
  <div class="content">
    <p>This is the content.</p>
  </div>
  <div class="footer">
    <p>My Footer</p>
  </div>
</my-component>

このコードを実行すると、以下のようになります。

My Header

This is the content.

My Footer

複数の <ng-content> 要素を使用する以外の方法

方法

ng-template 要素

<ng-template #header>
  <h1>My Header</h1>
</ng-template>

<ng-template #content>
  <p>This is the content.</p>
</ng-template>

<ng-template #footer>
  <p>My Footer</p>
</ng-template>

<my-component>
  <ng-container *ngTemplateOutlet="header"></ng-container>
  <ng-container *ngTemplateOutlet="content"></ng-container>
  <ng-container *ngTemplateOutlet="footer"></ng-container>
</my-component>

コンポーネントのコンテンツプロジェクション

コンポーネントのコンテンツプロジェクションを使用して、子コンポーネントのテンプレートにコンテンツを投影することができます。

@Component({
  selector: 'my-parent',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class MyParentComponent {}

@Component({
  selector: 'my-child',
  template: `
    <h1>My Header</h1>
    <p>This is the content.</p>
    <p>My Footer</p>
  `
})
export class MyChildComponent {}

<my-parent>
  <my-child></my-child>
</my-parent>