角度コンテンツ投影の詳細な説明

<!-- コンポーネント- app-content-single -->
<div>
  <h2>タイトル</h2>
  <!-- 投影コンテンツの表示位置 -->
  <コンテンツ></コンテンツ>
</div>
<!-- 使用法 -->
<アプリコンテンツシングル>
  <div>これはコンテンツです</div>
</アプリコンテンツシングル>

<!-- コンポーネント- app-content-more -->
<div>
  <h3>牧夫の称号</h3>
  <ng-content select=".header"></ng-content>
  <h3>本文タイトル</h3>
  <ng-content select="[本文]"></ng-content>
  <h3>デフォルトのタイトル</h3>
  <コンテンツ></コンテンツ>
  <h3>フッタータイトル</h3>
  <ng-content select="フッター"></ng-content>
</div>
<!-- 使用法 -->
<アプリコンテンツの詳細>
  <div>これは default01 です</div>
  <div class="header">これはヘッダーです</div>
  <div>これは default02 です</div>
  <div body>これが本文です</div>
  <div>これは default03 です</div>
  <footer>これはフッターです</footer>
  <div>これは default04 です</div>
</アプリコンテンツ>

'@angular/core' から Directive、TemplateRef をインポートします。
@指令（{
  セレクター: '[appChildRef]'
})
エクスポートクラスChildRefDirective {
  コンストラクター(パブリックテンプレートRef: TemplateRef<any>) { }
}

<div class="list-item" *ngFor="let person of persons;">
  <div>名前: {{ person.name }}}</div>
  <div>お金: {{ person.money }}</div>
  <div *ngIf="人.お金> 200">
    <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container>
  </div>
</div>

'@angular/core' から Component、ContentChild、OnInit をインポートします。
'../../../../directives/child-ref.directive' から { ChildRefDirective } をインポートします。
@成分（{
  セレクタ: 'app-persons'、
  テンプレート URL: './persons.component.html',
  スタイル URL: ['./persons.component.scss']
})
エクスポートクラスPersonsComponentはOnInitを実装します{
  人: { 名前: 文字列; お金: 数値; }[] = [
    { 名前: 'ジャック', お金: 120 },
    { 名前: 'Li Li', お金: 210 },
    { 名前: '張三', お金: 170 },
  ];
  ChildRefDirective は、コンテンツ オブジェクトの子として宣言されます。
  コンストラクタ() { }
  ngOnInit(): void { }
}

<アプリの人物>
  <ng-template アプリの子参照>
    <div style="font-size: 14px; color: red;">これは子参照コンテンツです</div>
  </ng-テンプレート>
</app-persons>

'@angular/core' から Directive、Input、TemplateRef をインポートします。
@指令（{
  セレクター: '[appChildRef]'
})
エクスポートクラスChildRefDirective {
  // 定義されたテンプレート名を受け入れ、この名前と persons のレンダリング フィールドを通じて対応するテンプレート コンテンツを表示します @Input() appChildRef!: string;
  コンストラクター(パブリックテンプレートRef: TemplateRef<any>) { }
}

<div class="list-item" *ngFor="let person of persons;let i=index;">
  <div>名前: {{ person.name }}}</div>
  <div>お金: {{ person.money }}</div>
  <!-- <div *ngIf="person.money > 200">
    <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container>
  </div> -->
  <div *ngIf="person.render && tempRefs[person.render]">
    <!-- ngTemplateOutlet ディレクティブを使用して、現在の人物データをテンプレートに渡します -->
    <ng-container *ngTemplateOutlet="tempRefs[person.render].templateRef; コンテキスト: { $implicit: person, i: i }"></ng-container>
  </div>
</div>

'@angular/core' から Component、ContentChild、ContentChildren、OnInit、QueryList をインポートします。
'../../../../directives/child-ref.directive' から { ChildRefDirective } をインポートします。
@成分（{
  セレクター: 'app-form-unit',
  テンプレート URL: './form-unit.component.html',
  スタイル URL: ['./form-unit.component.scss']
})
エクスポートクラスFormUnitComponentはOnInitを実装します{
  persons: { name: 文字列; money: 数値; render?: 文字列; }[] = [
    { 名前: 'ジャック', お金: 120, レンダリング: 'temp1' },
    { name: '李璃', money: 210, render: 'temp2' },
    { name: '张三', money: 170, render: 'temp3' },
  ];
  // @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective;
  @ContentChildren(ChildRefDirective) childrenRef!: QueryList<ChildRefDirective>;
  tempRefs() を取得する {
    定数 aObj: 任意 = {};
    this.childrenRef.forEach(テンプレート => {
      定数キー: string = template.appChildRef;
      aObj[キー] = テンプレート;
    })
    aObj を返します。
  }
  コンストラクタ() { }
  ngOnInit(): void { }
}

<アプリの人物>
  <ng-template appChildRef="temp1" let-person let-index="i">
    <div style="font-size: 14px; color: red;">{{index}}-{{person.name}}: これは temp1 です</div>
  </ng-テンプレート>
  <ng-template appChildRef="temp2" let-person let-index="i">
    <div style="font-size: 14px; color: green;">{{index}}-{{person.name}}: これは temp2 です</div>
  </ng-テンプレート>
  <ng-template appChildRef="temp3" let-person let-index="i">
    <div style="font-size: 14px; color: orange;">{{index}}-{{person.name}}: これは temp3 です</div>
  </ng-テンプレート>
</app-persons>