Angular の 3 種類のコンテンツ プロジェクション (シングル スロット、マルチスロット、条件付き) を理解するための 1 つの記事

この記事では、angular でのコンテンツ投影を理解し、単一スロット コンテンツ投影、マルチスロット コンテンツ投影、および条件付きコンテンツ投影について紹介します。皆様のお役に立てれば幸いです。

#[関連チュートリアルの推奨事項: 「

angular チュートリアル」]

単一スロット コンテンツ プロジェクション

単一スロット コンテンツの投影とは、コンポーネントを投影できるコンポーネントを作成することを指します。

zippy-basic.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-basic',
  template: `
  <h2>单插槽内容投影</h2>
  <ng-content></ng-content>
`
})
export class ZippyBasicComponent {}

ng-content 要素を使用すると、このコンポーネントのユーザーはコンポーネントの中央に独自のメッセージを投影できるようになります。 。例:

app.component.html

<!-- 将 app-zippy-basic 元素包裹的全部内容投影到 zippy-basic 组件中去 -->
<app-zippy-basic>
  <p>单插槽内容投影：投影数据</p>
</app-zippy-basic>

効果は次のとおりです:

ng-content 要素はプレースホルダーです。実際の DOM 要素は作成されません。

ng-content のカスタム属性は無視されます。

マルチスロット コンテンツ プロジェクション

コンポーネント テンプレートには、複数の
• ng-content タグが含まれています。
対応する
• ng-content タグに投影できる投影されたコンテンツを区別するには、ng の select 属性を使用する必要があります。 -content タグを識別として使用します。
• select属性は、タグ名、属性、CSS クラス、および疑似クラスの任意の組み合わせをサポートします。
• select 属性を追加しない ng-content タグは、デフォルトのスロットとして使用されます。一致する投影されたコンテンツはすべて、ng-content の位置に投影されます。

zippy-multislot.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-multislot',
  template: `
  <h2>多插槽内容投影</h2>
  <ng-content></ng-content>
  <ng-content select="[question]"></ng-content>
`
})
export class ZippyMultislotComponent {}

app.component.html

<!-- 使用 question 属性的内容将投影到带有 `select=[question]` 属性的 ng-content 元素。 -->
<app-zippy-multislot>
  <p question style="color: hotpink;">
    带question属性的p元素
  </p>
  <p style="color: lightgreen">不带question属性的p元素-->匹配到不带select属性的ng-content</p>
  <p>不带question属性的p元素-->匹配到不带select属性的ng-content</p>
</app-zippy-multislot>

効果は次のとおりです:

前の例では、2 番目の ng-content 要素のみに select 属性が定義されています。その結果、

最初の ng-content 要素は、コンポーネントに投影された他のコンテンツを受け取ります。

条件付きコンテンツ投影

ng-container タグは使用しないことをお勧めします。必須 実際の DOM 要素をレンダリングします。

<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
<!-- 等同 -->
<ng-container [ngTemplateOutlet]="templateRefExp" [ngTemplateOutletContext]="contextExp"></ng-container>

パラメータタイプ説明templateRefExpTemplateRef | nullテンプレート参照とテンプレートのコンテキスト オブジェクトを定義するために使用される文字列contextExpObject | null は、ローカル テンプレートの let ステートメントを使用してキー名をバインドできるオブジェクトです。コンテキスト オブジェクトのキー名として $implicit を使用する場合、それがデフォルト値として使用されます。

ng-template タグの #ID は、templateRefExp および と一致します。 ng- template タグの内容は、指定された ngTemplateOutlet に埋め込まれます。 #例 1:

<header>头部</header>
<main>
	<h3>内容：</h3>
	<ng-container [ngTemplateOutlet]="greet"></ng-container>
</main>
<footer>底部</footer>

<ng-template #greet>
	<div>
		<h4>hi!</h4>
		<h4>hello my dear friend!</h4>
	</div>
</ng-template>

効果:

##ViewChild と ContentChild

#ContentChild: コンテンツ サブノードに関連します。

投影されたコンテンツの操作

• #ViewChild: ビュー サブノードに関連します。 独自のビュー コンテンツを操作する
;
• ##ContentChild
前のパートでは、コンテンツ プロジェクションを使用してカスタム コンポーネント タグを埋め込めるようにしました。 HTML タグ内 または、コンポーネント ラベルをカスタマイズします。それで、投影されたコンテンツはどのように操作されますか?

最初に 2 つのコンポーネントを作成します

/**** part-b.component.ts ****/
import { Component, OnInit,Output} from '@angular/core';

@Component({
	selector: 'app-content-part-b',
	templateUrl: './part-b.component.html',
	styleUrls: ['./part-b.component.scss']
})

export class PartBComponent implements OnInit {
	constructor() { }
	ngOnInit() { }
	
	public func():void{
		console.log("PartB");
	} 
}

/**** part-a.component.ts ****/
import { Component, OnInit, ContentChild } from '@angular/core';
// 1、引入 part-b 组件
import { PartBComponent } from '../part-b/part-b.component';

@Component({
	selector: 'app-content-part-a',
	templateUrl: './part-a.component.html',
	styleUrls: ['./part-a.component.scss']
})

export class PartAComponent implements OnInit {
	// 2、获取投影
	@ContentChild(PartBComponent) PartB:PartBComponent
	constructor() { }
	ngOnInit() {}
	ngAfterContentInit(): void {
		// 3、调用 part-b 组件的 func() 方法
		this.PartB.func();
	}
	public func() {
		console.log('PartA')
	}
}

part-b

コンポーネントのコンテンツを次のように投影します。

part-a

コンポーネント内

 <!-- content.component.html -->
<div>
	<div>Content</div>
	<div>
		<app-content-part-a>
		<!-- 投影在part-a组件中的内容 -->
			<h1>PartA--start</h1>
			<app-content-part-b></app-content-part-b>
			<span>PartA--end</span>
		</app-content-part-a>
	</div>
</div>

コンポーネントのライフサイクルにはフックがありますngAfterContentInit()これは、投影されたコンテンツなので、投影されたコンテンツに関心があります。この操作は、初期化が完了した後に実行する必要があります。前の部分の 操作は、受信コンテンツが投影されるときに実行され、

ViewChild

は独自のビュー content

で動作します。 content.component.html の前の部分を変更します。次のように:

 <!-- content.component.html -->
<div>
	<div>Content</div>
	<div>
	<!-- 在此处引用模板变量 #partA -->
		<app-content-part-a #partA>
			<h1>PartA--start</h1>
				<app-content-part-b></app-content-part-b>
			<span>PartA--end</span>
		</app-content-part-a>
	</div>
</div>

/**** content.component.ts ****/
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
	selector: 'app-content',
	templateUrl: './content.component.html',
	styleUrls: ['./content.component.scss']
})

export class ContentComponent implements OnInit {
	// 2、获取视图 partA
	@ViewChild('partA') partA: any;
	constructor() { }
	ngOnInit() {}
	ngAfterViewInit(): void {
		// 3、调用 part-a 组件的 func() 方法
		this.partA.func();
	}
}

ngAfterContentInit( )は

ngAfterViewInit()

に対応します(ビュー ノードの初期化は、投影されたコンテンツの初期化の後に行われます) ContentChild
と ViewChild

ContentChildren

と

ViewChildren という複数の形式もあります。これらはノードのコレクションを取得します。 は次のように書かれています:

import { Component, OnInit, ContentChild,ContentChildren ,QueryList } from '@angular/core';
import { PartBComponent } from '../part-b/part-b.component';

@Component({
	selector: 'app-content-part-a',
	templateUrl: './part-a.component.html',
	styleUrls: ['./part-a.component.scss']
})
export class PartAComponent implements OnInit {

	@ContentChildren(PartBComponent) PartBs: QueryList<PartBComponent>;

	constructor() { }
	ngOnInit() {}
}

プログラミング関連の知識の詳細については、

プログラミング入門

を参照してください。 ！

以上がAngular の 3 種類のコンテンツ プロジェクション (シングル スロット、マルチスロット、条件付き) を理解するための 1 つの記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。