角度コア要素[ng]

Angular コア ライブラリの内部にはいくつかの機能があります.ここでは、ほとんどが混同されており、すべての angular 開発者によって使用されている 3 つのテンプレートを見ていきます.

ng-コンテナ

ng-コンテンツ

ng-テンプレート

ng-コンテナ

HTML テンプレートを作成せずにディレクティブのみを保持します.このタグに条件式を適用してテンプレートを挿入すると、指定された条件に関してテンプレートが読み込まれます.これは、単一の要素に複数の条件を適用する必要がある場合に役立ちます.

以下は、条件式を適用する方法の基本的な例です.

---------what you right-------------------
<ng-container *ngIf="isIronMan">
  <h1>Tony Stark</h1>
  <p>.......</p>
</ng-container>

--------what it loads in DOM---------------
<h1>Tony Stark</h1>
<p>.......</p>

ng-テンプレート

その中のテンプレートは、コンテナにアタッチしない限り読み込まれません.ディレクティブに追加すれば、必要な数の条件を適用できます.これらは TemplateRef クラスのインスタンスです.

テンプレートの参照を ViewContainerRef クラス createEmbededView メソッドに渡す必要があります.これにより、テンプレートがコンテナにロードされます.開発者は、いつどのように表示するかを完全に制御できます.

テンプレートに構造ディレクティブを適用することもできます.以下の例で理解できます.

<ng-template [ngIf]="isAdmin" [ngIfElse]="loading">
  <h1>Admin</h1>
</ng-template>
<ng-template #loading>
  <h1>Loading....</h1>
<ng-template>

上記の例では、条件によってテンプレートのレンダリングがどのように変化するかを確認できます. ngIf は、isAdmin が true か false かをチェックします. true の場合、最初のテンプレートをロードします.そうでない場合は、ロード名で参照されるテンプレートをロードします.

ng-コンテンツ

簡単に言えば、iframe の代わりと言えます.ディレクティブを作成すると、その特定のディレクティブ セレクター タグ内のコンテンツがディレクティブに読み込まれ、select という属性に割り当てることで、テンプレート内のコンテンツを投影する場所を指定できます.
その名前に DOM 要素を作成しません.

以下の例でさらに理解できます.
ディレクティブで ng-content を定義する一般的な方法.

----------------Directive--------------
import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

属性が一致する場合、コンテンツは指定された位置にロードされます.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

属性が一致しない場合、デフォルトの位置にロードされます.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From Example 1 another component</p>
  <p>From Example 2 another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From Example 2 another component</p>
<p>From Example 1 another component</p>

2 番目のケースでは、testProjection を持つ p タグも最初に書き込まれます.これは、デフォルトの ng-content の後に testProjection を持つ ng-content select 属性がロードされるため、2 番目の p タグの後にロードされます.

明確になり、3 つの要素すべての違いを理解していただければ幸いです.

幸せなコーディング.....