Angular組件學習之淺析內容投影

本篇文章帶大家了解一下Angular元件中的內容投影。內容投影和Vue中的插槽很類似，在元件封裝的時候非常有用，我們一起來體驗一下

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

1. 投影一塊內容

#容器元件這樣寫

<div>
  编号1
  <ng-content></ng-content>
</div>

業務元件這樣用

<app-page-container>
	未指定投影位置的内容会被投影到无select属性的区域
</app-page-container>

2. 投影多區塊內容/元件

容器元件這樣寫入

• 使用標籤鎖定投影位置

• 使用class鎖定投影位置

• ##用自訂元件名稱鎖定投影位置

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

<div>
  编号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>

業務元件這樣用

<app-page-container>
  <h3>使用标签锁定投影位置</h3>
  <div class="my-class">使用class锁定投影位置</div>
  <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello>
  <div content>使用自定义属性锁定投影位置</div>
</app-page-container>

示範

#3. 投影子元素

使用

ng-container來包裹子元素,減少不必要的dom層,類似vue中的template

容器元件這樣寫

<div>
  编号4
  <ng-content select="question"></ng-content>
</div>

業務元件這樣寫

<app-page-container>
  <ng-container>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
  </ng-container>
</app-page-container>

#4. 有條件的內容投影

中文網的描述:

• 如果你的元件需要_

  有條件地_渲染內容或多次渲染內容，則應配置該元件以接受一個ng-template 元素，其中包含要有條件渲染的內容。

• 在這種情況下，不建議使用ng-content 元素，因為只要元件的使用者提供了內容，即使元件從未定義ng-content 元素或該ng- content 元素位於

  ngIf 語句的內部，該內容也會總是初始化。

• 使用 ng-template 元素，你可以讓元件根據你想要的任何條件明確渲染內容，並且可以進行多次渲染。在明確渲染 ng-template 元素之前，Angular 不會初始化該元素的內容。

使用ng-container定義我們的投影區塊

• 使用

  ngTemplateOutlet指令來渲染ng-template元素。

• 透過內建的動態指令

  *ngIf來控制是否渲染投影。

<div>
  编号3
  <ng-content select="[button]"></ng-content>
  <p *ngIf="expanded">
    <ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>
  </p>
</div>

在業務元件中我們使用ng-template來包裹我們的實際元素。

my-hello元件只在ngOnInit()做日誌輸出來觀察列印狀況。

<app-page-container>
  <div button>
    <button appToggle>切换</button>
  </div>
  <ng-template appContent>
    <app-my-hello>有条件的内容投影~</app-my-hello>
  </ng-template>
</app-page-container>

現在你會發現頁面並沒有像前面那麼順利的正常渲染,因為我們的邏輯還沒有串通,我們繼續。創建一個指令,並在NgModule中註冊,一定要註冊才能用哦~

#指令需要註冊哦~

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appContent]',
})
export class ContentDirective {
  constructor(public templateRef: TemplateRef<unknown>) {}
}

我們再定義一個指令來控制元件中顯示/隱藏的識別

指令需要註冊哦~

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

在我們的容器元件中申明剛剛定義的內容指令,頁面目前不報錯咯~

export class PageContainerComponent implements OnInit {

  expanded: boolean = false;

  @ContentChild(ContentDirective)
  content!: ContentDirective;

}

透過日誌可以看到我們在切換容器元件的expanded標識時,只有開啟狀態 my-hello元件才會初始化,下面的這個ngIf雖然在頁面看不到渲染的內容,但元件實實在在被初始化過了。

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

5. @ContentChild & @ContentChildren

使用這兩個裝飾器來對投影的元件進行操作

使用註解在業務元件中定義被投影的元件

@ContentChild(HelloWorldComp)
helloComp: HelloWorldComp;

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

在ngAfterContentInit()鉤子執行後來對被投影元件進行操作

6. @ViewChild & @ViewChildren

使用這兩個裝飾器來對指接子元件進行操作

使用註解在業務元件中定義子元件

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

在ngAfterViewInit()鉤子執行後對直接子組件進行操作

結語

關於組件的使用我們就先寫到這裡了,文筆功底有限,加油了~

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

以上是Angular組件學習之淺析內容投影的詳細內容。更多資訊請關注PHP中文網其他相關文章！