一文了解angular中的3種內容投影（單插槽、多插槽、有條件）

這篇文章帶大家了解下angular中的內容投影，介紹一下單插槽內容投影、多插槽內容投影、有條件的內容投影，希望對大家有幫助！

【相關教學推薦：《angular教學》】

單插槽內容投影

##單一插槽內容投影是指建立一個元件，你可以在其中投影一個元件。

zippy-basic.component.ts

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

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

有了

ng-content

元素，該元件的使用者現在可以將自己的訊息投影到該元件中。例如：app.component.html

  
单插槽内容投影：投影数据

效果如下：

ng-content 元素是佔位符，它不會創建真正的DOM 元素。
• ng-content 的那些自訂屬性將被忽略。 多重插槽內容投影
• #元件範本含有多個
ng-content
• 標籤。 為了區分投影的內容可以投影到對應ng-content標籤，需要使用
ng-content

標籤上的

select

屬性作為識別。

select

屬性支援標籤名稱、屬性、CSS 類別和 :not 偽類別的任意組合。
不加入

select

屬性的

ng-content標籤將作為預設插槽。所有為匹配的投影內容都會投影在該ng-content的位置。

zippy-multislot.component.ts

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

@Component({
  selector: 'app-zippy-multislot',
  template: `
  
多插槽内容投影
  
  
`
})
export class ZippyMultislotComponent {}

app.component.html

  

    带question属性的p元素
  
  
不带question属性的p元素-->匹配到不带select属性的ng-content
  
不带question属性的p元素-->匹配到不带select属性的ng-content

效果如下：

#在前面的範例中，只有第二個ng-content 元素定義了select 屬性。結果，第一個 ng-content 元素就會接收投影到元件中的任何其他內容。 #推薦使用ng-container標籤，因為該標籤不需要渲染真實的DOM 元素。 類型templateRefExp

	有條件的內容投影
		參數
說明

TemplateRef | null

一個字串，用於定義模板參考以及模板的上下文物件##contextExp #Object | null是一個對象，該物件的鍵名將可以在局部模板中使用let 宣告中進行綁定。在上下文物件中使用 $implicit 為鍵名時，將把它作為預設值。

ng-template

標籤的

#ID會符合

templateRefExp

，將ng- template標籤的內容嵌入到指定的

ngTemplateOutlet

中。
• 範例一：

  头部
  
  	
  内容：
  	
  
  底部
  
  
  	
  
  		
  hi!
  		
  hello my dear friend!
  	
  

  效果：
• #ViewChild與ContentChild

#ContentChild:與內容子節點有關,

操作投影進來的內容

;

ViewChild

:與視圖子節點有關,操作自身的視圖內容;

ContentChild

#在上一個部分,我們透過內容投影,讓自訂的元件標籤能夠嵌入html標籤或自訂元件標籤,那麼它如何操作投影進來的內容呢?

首先創建兩個元件

/**** 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
	

		
		
			
PartA--start
			
			PartA--end
		
	

在元件的生命週期裡面,有一個鉤子
ngAfterContentInit()是與投影內容初始化有關,所以我們有關投影的內容操作盡量放在它初始化完成之後進行

ViewChild#上一部分的ContentChild

操作的時投影進來的內容，而

ViewChild

操作的是自身的視圖內容 給上一個部分的content.component.html修改如下：

 

	
Content
	

	
		
			
PartA--start
				
			PartA--end
		
	

/**** 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;

	constructor() { }
	ngOnInit() {}
}

###更多程式相關知識，請造訪：###程式設計入門###！ ！ ###

以上是一文了解angular中的3種內容投影（單插槽、多插槽、有條件）的詳細內容。更多資訊請關注PHP中文網其他相關文章！