ホームページ > ウェブフロントエンド > jsチュートリアル > Angular コンポーネント学習におけるコンテンツ投影の簡単な分析

Angular コンポーネント学習におけるコンテンツ投影の簡単な分析

青灯夜游
リリース: 2021-08-09 10:25:20
転載
1668 人が閲覧しました

この記事では、Angular コンポーネントでのコンテンツ プロジェクションについて説明します。コンテンツ プロジェクションは、Vue のスロットに非常に似ています。コンポーネントをカプセル化するときに非常に便利です。一緒に体験しましょう

Angular コンポーネント学習におけるコンテンツ投影の簡単な分析

[関連チュートリアルの推奨事項: "angular チュートリアル 》]

##1. コンテンツの一部を投影する

##コンテナ コンポーネントは次のように記述されます

#

1

2

3

4

<div>

  编号1

  <ng-content></ng-content>

</div>

ログイン後にコピー
ビジネス コンポーネントは次のように使用されます

#

1

2

3

<app-page-container>

    未指定投影位置的内容会被投影到无select属性的区域

</app-page-container>

ログイン後にコピー

#2. 複数のコンテンツ/コンポーネントをプロジェクトします

#コンテナコンポーネントは次のように記述します

タグを使用して投影位置をロックします

    クラスを使用して投影位置をロックします投影位置
  • # カスタム コンポーネント名で投影位置をロック
  • #カスタム属性で投影位置をロック
  • #

    1

    2

    3

    4

    5

    6

    7

    <div>

      编号2

      <ng-content select="h3"></ng-content>

      <ng-content select=".my-class"></ng-content>

      <ng-content select="app-my-hello"></ng-content>

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

    </div>

    ログイン後にコピー

    ビジネス コンポーネントは次のように使用されます
  • 1

    2

    3

    4

    5

    6

    <app-page-container>

      <h3>使用标签锁定投影位置</h3>

      <div class="my-class">使用class锁定投影位置</div>

      <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello>

      <div content>使用自定义属性锁定投影位置</div>

    </app-page-container>

    ログイン後にコピー

    デモ

##3. 子要素の投影

Angular コンポーネント学習におけるコンテンツ投影の簡単な分析vue のテンプレートと同様に、

ng-container

を使用して子要素をラップし、不要な dom レイヤーを削減しますコンテナ コンポーネントは次のように記述されます

1

2

3

4

<div>

  编号4

  <ng-content select="question"></ng-content>

</div>

ログイン後にコピー

ビジネス コンポーネントは次のように記述されます#

1

2

3

4

5

6

7

8

<app-page-container>

  <ng-container ngProjectAs="question">

    <p>内容投影酷吗?</p>

    <p>内容投影酷吗?</p>

    <p>内容投影酷吗?</p>

    <p>内容投影酷吗?</p>

  </ng-container>

</app-page-container>

ログイン後にコピー

4. 条件付きコンテンツの投影

中国語 Web サイトの説明:

コンポーネントが必要な場合__条件付き_render content またはコンテンツを複数回レンダリングする場合は、条件付きでレンダリングされるコンテンツを含む ng-template 要素を受け入れるようにコンポーネントを構成する必要があります。

この場合、コンポーネントが ng-content を定義していなくても、コンポーネントのユーザーがコンテンツを提供する限り、ng-content 要素を使用することはお勧めできません。要素または ng - content 要素は

ngIf
    ステートメント内にあり、コンテンツは常に初期化されます。
  • ng-template 要素を使用すると、必要な条件に基づいてコンポーネントに明示的にコンテンツをレンダリングさせ、複数回レンダリングすることができます。 Angular は、要素が明示的にレンダリングされるまで、ng-template 要素のコンテンツを初期化しません。

  • ng-container を使用します
  • 投影ブロックを定義します
## を使用します
ng-template

要素をレンダリングするための #ngTemplateOutlet ディレクティブ。

組み込みの動的ディレクティブ
    *ngIf
  • を使用して、投影をレンダリングするかどうかを制御します。

    1

    2

    3

    4

    5

    6

    7

    <div>

      编号3

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

      <p *ngIf="expanded">

        <ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>

      </p>

    </div>

    ログイン後にコピー
    ビジネス コンポーネントでは、

    ng-template
  • を使用して実際の要素をラップします。
  • my-hello コンポーネントは、印刷状況を観察するために ngOnInit() でログ出力を行うだけです。

  • 1

    2

    3

    4

    5

    6

    7

    8

    <app-page-container>

      <div button>

        <button appToggle>切换</button>

      </div>

      <ng-template appContent>

        <app-my-hello>有条件的内容投影~</app-my-hello>

      </ng-template>

    </app-page-container>

    ログイン後にコピー

ロジックがまだ共謀していないため、ページが以前ほどスムーズにレンダリングされないことがわかります。続けましょう。コマンドを作成し、NgModule に登録します。使用する前に登録する必要があります~コマンドは登録する必要があります~

1

2

3

4

5

6

7

8

import { Directive, TemplateRef } from &#39;@angular/core&#39;;

 

@Directive({

  selector: &#39;[appContent]&#39;,

})

export class ContentDirective {

  constructor(public templateRef: TemplateRef<unknown>) {}

}

ログイン後にコピー

再度定義していきます コンポーネント内のロゴの表示/非表示を制御するコマンド

##コマンドの登録が必要です~

1

2

3

4

5

6

7

8

9

@Directive({

  selector: &#39;[appToggle]&#39;,

})

export class ToggleDirective {

  @HostListener(&#39;click&#39;) toggle() {

    this.app.expanded = !this.app.expanded;

  }

  constructor(public app: PageContainerComponent) {}

}

ログイン後にコピー

コンテナ コンポーネントのコンテンツの指示に今定義を記述します。ページは現在エラーを報告していません~

1

2

3

4

5

6

7

8

export class PageContainerComponent implements OnInit {

 

  expanded: boolean = false;

 

  @ContentChild(ContentDirective)

  content!: ContentDirective;

 

}

ログイン後にコピー

ログから、expanded を切り替えると次のことがわかります。

コンテナ コンポーネントのロゴ。開いた状態のみです。
my-hello

コンポーネントは初期化されます。次の

ngIf
ではページ上にレンダリングされたコンテンツが表示されませんが、コンポーネントは実際に初期化されています。

1

2

3

<strong><div *ngIf="false">

  <ng-content *ngIf="false" select="app-my-hello"></ng-content>

</div></strong>

ログイン後にコピー

5. @ContentChild および @ContentChildrenこれら 2 つのデコレータを使用してコンポーネントを投影します 操作を実行します

アノテーションを使用して、ビジネス コンポーネントで投影されたコンポーネントを定義します。

1

2

3

4

5

@ContentChild(HelloWorldComp)

helloComp: HelloWorldComp;

 

@ContentChildren(HelloWorldComp)

helloComps: QueryList<HelloWorldComp>;

ログイン後にコピー
ngAfterContentInit()

フックで実行して、操作します。投影されたコンポーネント

#6. @ViewChild と @ViewChildren

#これら 2 つのデコレータを使用して、フィンガージョインされたサブオブジェクトを操作します。コンポーネント

アノテーションを使用してビジネス コンポーネントのサブコンポーネントを定義します

1

2

3

4

5

@ViewChild(HelloWorldComp)

helloComp: HelloWorldComp;

   

@ViewChildren(HelloWorldComp)

helloComps QueryList<HelloWorldComp>;

ログイン後にコピー
InngAfterViewInit()フックが終了した後実行して、直接のサブコンポーネントを操作します

#結論

コンポーネントの使用法についてここで書きました。私たちの文章スキルには限界があるので、さあ、 .~ を取得しました

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 !

以上がAngular コンポーネント学習におけるコンテンツ投影の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート