angular中的內(nèi)容投影有哪幾種

本篇內(nèi)容介紹了“angular中的內(nèi)容投影有哪幾種”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

單插槽內(nèi)容投影

單插槽內(nèi)容投影是指創(chuàng)建一個(gè)組件，你可以在其中投影一個(gè)組件。

zippy-basic.component.ts

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

@Component({
  selector: 'app-zippy-basic',
  template: `
  <h3>單插槽內(nèi)容投影</h3>
  <ng-content></ng-content>
`
})
export class ZippyBasicComponent {}

有了 ng-content 元素，該組件的用戶現(xiàn)在可以將自己的消息投影到該組件中。例如：

app.component.html

<!-- 將 app-zippy-basic 元素包裹的全部內(nèi)容投影到 zippy-basic 組件中去 -->
<app-zippy-basic>
  <p>單插槽內(nèi)容投影：投影數(shù)據(jù)</p>
</app-zippy-basic>

效果如下：

ng-content 元素是一個(gè)占位符，它不會(huì)創(chuàng)建真正的 DOM 元素。ng-content 的那些自定義屬性將被忽略。

多插槽內(nèi)容投影

• 組件模板含有多個(gè)ng-content標(biāo)簽。

• 為了區(qū)分投影的內(nèi)容可以投影到對應(yīng)ng-content標(biāo)簽，需要使用ng-content標(biāo)簽上的select屬性作為識別。

• select屬性支持標(biāo)簽名、屬性、CSS 類和 :not 偽類的任意組合。

• 不添加select屬性的ng-content標(biāo)簽將作為默認(rèn)插槽。所有為匹配的投影內(nèi)容都會(huì)投影在該ng-content的位置。

zippy-multislot.component.ts

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

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

app.component.html

<!-- 使用 question 屬性的內(nèi)容將投影到帶有 `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>

效果如下：

在前面的示例中，只有第二個(gè) ng-content 元素定義了select 屬性。結(jié)果，第一個(gè) ng-content 元素就會(huì)接收投影到組件中的任何其他內(nèi)容。

有條件的內(nèi)容投影

推薦使用ng-container標(biāo)簽，因?yàn)樵摌?biāo)簽不需要渲染真實(shí)的 DOM 元素。

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

ng-template 標(biāo)簽的#ID會(huì)匹配templateRefExp，將ng-template標(biāo)簽的內(nèi)容嵌入到指定的ngTemplateOutlet中。

例一：

<header>頭部</header>
<main>
	<h4>內(nèi)容：</h4>
	<ng-container [ngTemplateOutlet]="greet"></ng-container>
</main>
<footer>底部</footer>

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

效果：

ViewChild和ContentChild

• ContentChild:與內(nèi)容子節(jié)點(diǎn)有關(guān),操作投影進(jìn)來的內(nèi)容;

• ViewChild:與視圖子節(jié)點(diǎn)有關(guān),操作自身的視圖內(nèi)容;

ContentChild

在上一部分,我們通過內(nèi)容投影,讓自定義的組件標(biāo)簽?zāi)軌蚯度雋tml標(biāo)簽或自定義組件標(biāo)簽,那么它如何操作投影進(jìn)來的內(nèi)容呢?

首先創(chuàng)建兩個(gè)組件

/**** 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、調(diào)用 part-b 組件的 func() 方法
		this.PartB.func();
	}
	public func() {
		console.log('PartA')
	}
}

將part-b組件的內(nèi)容投影到part-a組件中

 <!-- content.component.html -->
<div>
	<div>Content</div>
	<div>
		<app-content-part-a>
		<!-- 投影在part-a組件中的內(nèi)容 -->
			<h2>PartA--start</h2>
			<app-content-part-b></app-content-part-b>
			<span>PartA--end</span>
		</app-content-part-a>
	</div>
</div>

在組件的生命周期里面,有一個(gè)鉤子ngAfterContentInit()是與投影內(nèi)容初始化有關(guān),所以我們有關(guān)投影的內(nèi)容操作盡量放在它初始化完成之后進(jìn)行

ViewChild

上一部分的ContentChild操作的時(shí)投影進(jìn)來的內(nèi)容，而ViewChild操作的是自身的視圖內(nèi)容
給上一部分的content.component.html修改如下：

 <!-- content.component.html -->
<div>
	<div>Content</div>
	<div>
	<!-- 在此處引用模板變量 #partA -->
		<app-content-part-a #partA>
			<h2>PartA--start</h2>
				<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、調(diào)用 part-a 組件的 func() 方法
		this.partA.func();
	}
}

ngAfterContentInit()對應(yīng)的是ngAfterViewInit()(視圖節(jié)點(diǎn)初始化是在投影內(nèi)容初始化之后)

ContentChild和ViewChild還存在復(fù)數(shù)的形式,即ContentChildren和ViewChildren,它們?nèi)〉降氖枪?jié)點(diǎn)的一個(gè)集合,其他的沒有什么區(qū)別

寫法如下：

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中的內(nèi)容投影有哪幾種”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！