本篇文章帶大家了解一下Angular組件中的內(nèi)容投影。內(nèi)容投影和Vue中的插槽很類(lèi)似，在組件封裝的時(shí)候非常有用，我們一起來(lái)體驗(yàn)一下

【相關(guān)教程推薦：《angular教程》】

1. 投影一塊內(nèi)容

容器組件這樣寫(xiě)

<div>   編號(hào)1   <ng-content></ng-content> </div>

業(yè)務(wù)組件這樣用

<app-page-container> 	未指定投影位置的內(nèi)容會(huì)被投影到無(wú)select屬性的區(qū)域 </app-page-container>

2. 投影多塊內(nèi)容/組件

容器組件這樣寫(xiě)

• 使用標(biāo)簽鎖定投影位置

• 使用class鎖定投影位置

• 用自定義組件名稱(chēng)鎖定投影位置

• 使用自定義屬性鎖定投影位置

<div>   編號(hào)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>

業(yè)務(wù)組件這樣用

<app-page-container>   <h3>使用標(biāo)簽鎖定投影位置</h3>   <div class="my-class">使用class鎖定投影位置</div>   <app-my-hello>使用自定義組件名稱(chēng)鎖定投影位置</app-my-hello>   <div content>使用自定義屬性鎖定投影位置</div> </app-page-container>

演示

3. 投影子元素

使用ng-container來(lái)包裹子元素,減少不必要的dom層,類(lèi)似vue中的template

容器組件這樣寫(xiě)

<div>   編號(hào)4   <ng-content select="question"></ng-content> </div>

業(yè)務(wù)組件這樣寫(xiě)

<app-page-container>   <ng-container ngProjectAs="question">     <p>內(nèi)容投影酷嗎?</p>     <p>內(nèi)容投影酷嗎?</p>     <p>內(nèi)容投影酷嗎?</p>     <p>內(nèi)容投影酷嗎?</p>   </ng-container> </app-page-container>

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

中文網(wǎng)的描述:

• 如果你的組件需要_有條件地_渲染內(nèi)容或多次渲染內(nèi)容，則應(yīng)配置該組件以接受一個(gè) ng-template 元素，其中包含要有條件渲染的內(nèi)容。

• 在這種情況下，不建議使用 ng-content 元素，因?yàn)橹灰M件的使用者提供了內(nèi)容，即使該組件從未定義 ng-content 元素或該 ng-content 元素位于 ngIf 語(yǔ)句的內(nèi)部，該內(nèi)容也總會(huì)被初始化。

• 使用 ng-template 元素，你可以讓組件根據(jù)你想要的任何條件顯式渲染內(nèi)容，并可以進(jìn)行多次渲染。在顯式渲染 ng-template 元素之前，Angular 不會(huì)初始化該元素的內(nèi)容。

使用ng-container定義我們的投影區(qū)塊

• 使用ngTemplateOutlet指令來(lái)渲染ng-template元素。

• 通過(guò)內(nèi)置的動(dòng)態(tài)指令*ngIf來(lái)控制是否渲染投影。

<div>   編號(hào)3   <ng-content select="[button]"></ng-content>   <p *ngIf="expanded">     <ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>   </p> </div>

在業(yè)務(wù)組件中我們使用ng-template來(lái)包裹我們的實(shí)際元素。

my-hello組件只在ngOnInit()做日志輸出來(lái)觀察打印情況。

<app-page-container>   <div button>     <button appToggle>切換</button>   </div>   <ng-template appContent>     <app-my-hello>有條件的內(nèi)容投影~</app-my-hello>   </ng-template> </app-page-container>

現(xiàn)在你會(huì)發(fā)現(xiàn)頁(yè)面并沒(méi)有像前面那么順利的正常渲染,因?yàn)槲覀兊倪壿嬤€沒(méi)有串通,我們繼續(xù)。創(chuàng)建一個(gè)指令,并在NgModule中注冊(cè),一定要注冊(cè)才能用哦~

指令需要注冊(cè)哦~

import { Directive, TemplateRef } from '@angular/core';  @Directive({   selector: '[appContent]', }) export class ContentDirective {   constructor(public templateRef: TemplateRef<unknown>) {} }

我們?cè)俣x一個(gè)指令來(lái)控制組件中顯示/隱藏的標(biāo)識(shí)

指令需要注冊(cè)哦~

@Directive({   selector: '[appToggle]', }) export class ToggleDirective {   @HostListener('click') toggle() {     this.app.expanded = !this.app.expanded;   }   constructor(public app: PageContainerComponent) {} }

在我們的容器組件中申明剛才定義的內(nèi)容指令,頁(yè)面目前不報(bào)錯(cuò)咯~

export class PageContainerComponent implements OnInit {    expanded: boolean = false;    @ContentChild(ContentDirective)   content!: ContentDirective;  }

通過(guò)日志可以看到我們?cè)谇袚Q容器組件的expanded標(biāo)識(shí)時(shí),只有開(kāi)啟狀態(tài)my-hello組件才會(huì)初始化,下面的這個(gè)ngIf雖然在頁(yè)面看不到渲染的內(nèi)容,但組件實(shí)實(shí)在在被初始化過(guò)了。

<div *ngIf="false">   <ng-content *ngIf="false" select="app-my-hello"></ng-content> </div>

5. @ContentChild & @ContentChildren

使用這兩個(gè)裝飾器來(lái)對(duì)被投影的組件進(jìn)行操作

使用注解在業(yè)務(wù)組件中定義被投影的組件

@ContentChild(HelloWorldComp) helloComp: HelloWorldComp;  @ContentChildren(HelloWorldComp) helloComps: QueryList<HelloWorldComp>;

在ngAfterContentInit()鉤子執(zhí)行后對(duì)被投影組件進(jìn)行操作

6. @ViewChild & @ViewChildren

使用這兩個(gè)裝飾器來(lái)對(duì)指接子組件進(jìn)行操作

使用注解在業(yè)務(wù)組件中定義子組件

@ViewChild(HelloWorldComp) helloComp: HelloWorldComp;    @ViewChildren(HelloWorldComp) helloComps QueryList<HelloWorldComp>;

在ngAfterViewInit()鉤子執(zhí)行后對(duì)直接子組件進(jìn)行操作

結(jié)語(yǔ)

關(guān)于組件的使用我們就先寫(xiě)到這里了,文筆功底有限,加油了~