この記事では、Angular コンポーネントでのコンテンツ プロジェクションについて説明します。コンテンツ プロジェクションは、Vue のスロットに非常に似ています。コンポーネントをカプセル化するときに非常に便利です。一緒に体験しましょう
[関連チュートリアルの推奨事項: "angular チュートリアル 》]
#
1 2 3 4 |
|
1 2 3 |
|
#2. 複数のコンテンツ/コンポーネントをプロジェクトします
タグを使用して投影位置をロックします
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 |
|
##3. 子要素の投影
vue のテンプレートと同様に、
ng-container
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 サイトの説明:
ng-templateこの場合、コンポーネントが ng-content を定義していなくても、コンポーネントのユーザーがコンテンツを提供する限り、ng-content 要素を使用することはお勧めできません。要素または ng - content 要素は
ngIf## を使用します
要素をレンダリングするための #ngTemplateOutlet ディレクティブ。
1 2 3 4 5 6 7 |
|
ビジネス コンポーネントでは、ng-templatemy-hello コンポーネントは、印刷状況を観察するために ngOnInit() でログ出力を行うだけです。
1 2 3 4 5 6 7 8 |
|
ロジックがまだ共謀していないため、ページが以前ほどスムーズにレンダリングされないことがわかります。続けましょう。コマンドを作成し、NgModule に登録します。使用する前に登録する必要があります~コマンドは登録する必要があります~
再度定義していきます コンポーネント内のロゴの表示/非表示を制御するコマンド
1
2
3
4
5
6
7
8
import { Directive, TemplateRef } from &
#39;@angular/core';
@Directive({
selector: &
#39;[appContent]',
})
export class ContentDirective {
constructor(public templateRef: TemplateRef<unknown>) {}
}
ログイン後にコピー
##コマンドの登録が必要です~
1 2 3 4 5 6 7 8 9 |
|
コンテナ コンポーネントのコンテンツの指示に今定義を記述します。ページは現在エラーを報告していません~
1 2 3 4 5 6 7 8 |
|
ログから、expanded を切り替えると次のことがわかります。
コンテナ コンポーネントのロゴ。開いた状態のみです。my-helloではページ上にレンダリングされたコンテンツが表示されませんが、コンポーネントは実際に初期化されています。コンポーネントは初期化されます。次の
ngIf
1 2 3 |
|
5. @ContentChild および @ContentChildrenこれら 2 つのデコレータを使用してコンポーネントを投影します 操作を実行します
1 2 3 4 5 |
|
#6. @ViewChild と @ViewChildren
#これら 2 つのデコレータを使用して、フィンガージョインされたサブオブジェクトを操作します。コンポーネント
1 2 3 4 5 |
|
#結論
コンポーネントの使用法についてここで書きました。私たちの文章スキルには限界があるので、さあ、 .~ を取得しました
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 !
以上がAngular コンポーネント学習におけるコンテンツ投影の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。