Satu artikel untuk memahami tiga jenis unjuran kandungan dalam Sudut (slot tunggal, berbilang slot, bersyarat)

Artikel ini akan membawa anda melalui unjuran kandungan dalam sudut, dan memperkenalkan unjuran kandungan slot tunggal, unjuran kandungan berbilang slot dan unjuran kandungan bersyarat. Saya harap ia akan membantu semua orang.

[Cadangan tutorial berkaitan: "tutorial sudut"]

Unjuran kandungan slot tunggal

Unjuran kandungan slot tunggal bermaksud mencipta komponen di mana anda boleh menayangkan komponen.

zippy-basic.component.ts

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

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

Dengan elemen ng-content, pengguna komponen ini kini boleh menayangkan mesej mereka sendiri ke dalam komponen. Contohnya:

app.component.html

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

Kesannya adalah seperti berikut:

elemen ng-kandungan ialah pemegang tempat, Ia tidak mencipta elemen DOM sebenar. Atribut tersuai ng-content tersebut akan diabaikan.

Unjuran kandungan berbilang slot

• templat komponen mengandungi berbilang teg ng-content.
• Untuk membezakan kandungan yang diunjurkan yang boleh ditayangkan kepada teg ng-content yang sepadan, atribut ng-content pada teg select perlu digunakan sebagai pengenalan.
• selectAtribut menyokong sebarang gabungan nama teg, atribut, kelas CSS dan :bukan kelas pseudo.
• Teg select tanpa menambah atribut ng-content akan digunakan sebagai slot lalai. Semua kandungan unjuran yang sepadan akan ditayangkan pada kedudukan kandungan-ng.

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>

Kesannya adalah seperti berikut:

Dalam contoh sebelumnya, hanya elemen ng-kandungan kedua yang mempunyai atribut pilih yang ditentukan. Akibatnya, elemen pertama akan menerima sebarang kandungan lain yang ditayangkan ke dalam komponen tersebut.

Unjuran kandungan bersyarat

Adalah disyorkan untuk menggunakan tag ng-container kerana ia tidak memerlukan pemaparan elemen DOM sebenar .

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

参数	类型	说明
templateRefExp	TemplateRef | null	一个字符串，用于定义模板引用以及模板的上下文对象
contextExp	Object | null	是一个对象，该对象的键名将可以在局部模板中使用 let 声明中进行绑定。在上下文对象中使用 $implicit 为键名时，将把它作为默认值。

ng-template teg #ID akan sepadan dengan templateRefExp, membenamkan kandungan teg ng-template ke dalam ngTemplateOutlet yang ditentukan.

Contoh 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>

Kesan:

ViewChild dan ContentChild

• ContentChild: berkaitan dengan subnod kandungan, mengendalikan kandungan yang diunjurkan ;
• ViewChild: berkaitan dengan subnod paparan, mengendalikan kandungannya sendiri lihat kandungan;

ContentChild

Dalam bahagian sebelumnya, kami menggunakan unjuran kandungan untuk membolehkan teg komponen tersuai membenamkan teg html atau teg komponen tersuai , Jadi bagaimana ia beroperasi pada kandungan yang diunjurkan

Mula-mula buat dua komponen

/**** 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')
	}
}

unjurkan kandungan komponen part-b ke dalam komponen 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>

Dalam kitaran hayat komponen, terdapat cangkuk ngAfterContentInit() yang berkaitan dengan pemulaan kandungan yang diunjurkan, jadi operasi kandungan kami yang berkaitan dengan unjuran harus dilakukan selepas permulaannya selesai

ViewChild

Bahagian sebelumnya ContentChild beroperasi pada kandungan yang diunjurkan, manakala ViewChild beroperasi pada kandungan paparannya sendiri
untuk yang sebelumnya bahagian content.component.htmlUbah suai seperti berikut:

 <!-- 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() sepadan dengan ngAfterViewInit() (permulaan nod paparan adalah selepas kandungan yang diunjurkan dimulakan)

ContentChild dan ViewChild juga wujud dalam bentuk jamak, iaitu ContentChildren dan ViewChildren Mereka memperoleh satu set nod, dan tiada perbezaan antara yang lain

ditulis seperti berikut :

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() {}
}

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Satu artikel untuk memahami tiga jenis unjuran kandungan dalam Sudut (slot tunggal, berbilang slot, bersyarat). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!