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