欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular中ng-template和ng-container的應(yīng)用小結(jié)

 更新時(shí)間：2022年06月20日 09:24:40   作者：微之風(fēng)  
Angular的日常工作中經(jīng)常會(huì)使用到ng-template和ng-container，本文對(duì)他們做一個(gè)總結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

Angular的日常工作中經(jīng)常會(huì)使用到ng-template和ng-container，本文對(duì)他們做一個(gè)總結(jié)。

ng-template

ng-template是一個(gè)Angular元素，它不會(huì)直接顯示出來。在渲染視圖之前，Angular會(huì)把它的內(nèi)容替換為一個(gè)注釋。ng-template是用來定義模板的，當(dāng)定義好一個(gè)模板之后，可以用ng-container和ngTemplateOutlet指令來進(jìn)行使用。

簡單點(diǎn)來說，就是定義了一個(gè)模板片段，并且起了一個(gè)名字，在需要的時(shí)候可以通過名字來使用這個(gè)片段。

<!--定義模板，并不會(huì)在視圖中顯示-->
<ng-template #loading>
  <div class="waiting-wrap">
    <div class="spinner">loading...</div>
  </div>
</ng-template>

<!--使用模板，在視圖中顯示-->
<ng-container *ngTemplateOutlet="loading"></ng-container>
<ng-template #myTemp>
    <div>Hello, Tom?</div>
</ng-template>

<div class="container">
    <ng-container *ngTemplateOutlet="myTemp"></ng-container>
    <div [ngTemplateOutlet]="myTemp">
        Jerry
    </div>
</div>

作用域的Template

帶作用域的Template，可以從當(dāng)前作用域獲得數(shù)據(jù)。

<ng-template #userTemp let-account="name" let-age="age">
    <p>{{account}} - {{age}}</p>
</ng-template>

<ng-container *ngTemplateOutlet="userTemp; context: userInfo">
</ng-container>

上面的let-account="name"，相當(dāng)于定義了一個(gè)account變量，變量的值為 context.name。也就是下面的代碼：

let account = context.name;
let age = context.age;
import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { MsgComponent } from '../msg/msg.component';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit, OnChanges, AfterViewInit {
  userInfo: any;

  constructor() {}

  ngOnInit(): void {
    this.userInfo = {
      name: 'Tom',
      age: 21
    };

    // this.createComponent();
  }
}

TemplateRef

TemplateRef實(shí)例用于表示模板對(duì)象。如果我在模板里定義了一個(gè)ng-template，想在組件中訪問它，這時(shí)候就用到了TemplateRef。

<!--定義模板，并不會(huì)在視圖中顯示-->
<ng-template #myTemp>
   <div>Hello, Tom?</div>
</ng-template>
export class UserComponent implements OnInit, OnChanges, AfterViewInit {
  @ViewChild('myTemp', { read: TemplateRef}) temp1!: TemplateRef<any>;
  ......
}

TemplateRef:
Represents an embedded template that can be used to instantiate embedded views. To instantiate embedded views based on a template, use the ViewContainerRef method createEmbeddedView().

TemplateRef就是ng-template的實(shí)例。后面會(huì)說怎么和ng-container的實(shí)例搭配使用。

ng-container

ng-container是Angular的一個(gè)特殊標(biāo)簽，它和ng-template完全不同。

  • ng-template只是定義了一個(gè)視圖片段的模板，并不會(huì)直接在視圖中展示出來（會(huì)顯示為注釋）；
  • ng-container可以在視圖中展示出來，其本身并沒有創(chuàng)建任何節(jié)點(diǎn)，只是作為一個(gè)邏輯Tag來使用；
<ng-template #myTemp>
    <div>Hello, Tom?</div>
</ng-template>

<div class="container">
  <ng-container #container1>
    Jerry
  </ng-container>
</div>

在Vue2中，我們定義一個(gè)組件，但是這個(gè)組件的視圖中必須有一個(gè)根元素，如果有多個(gè)根元素，就會(huì)報(bào)錯(cuò)。是因?yàn)?，任何Vue組件的實(shí)例需要綁定到一個(gè)單一DOM元素上。

<template>
  <!--報(bào)錯(cuò)-->
  <div>
    Tom
  </div>
  <div>
    {{age}}
  </div>
</template>

<template>
  <!--正確-->
  <div>
     <div>
        Tom
    </div>
    <div>
        {{age}}
    </div>
  </div>
 </template>

但是有些情況下，我們就是不想有外層元素包裹，那怎么辦呢？Vue3中改善了這一點(diǎn)，直接可以寫上面的模板，并不會(huì)報(bào)錯(cuò)，原因是在模板編譯的時(shí)候自動(dòng)添加了Fragment虛擬元素。
在React中也會(huì)有同樣的問題，解決方案就是一個(gè)名為Fragment的虛擬元素。

class Columns extends React.Component {  
  render() {    
    return (<React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
        );  
    }
}

盡管Fragment看起來像一個(gè)普通的DOM元素，但它是虛擬的，根本不會(huì)在DOM樹中呈現(xiàn)。這樣我們可以將組件實(shí)例綁定到一個(gè)單一的元素中，而不需要?jiǎng)?chuàng)建一個(gè)多余的DOM節(jié)點(diǎn)。

Angular中的ng-container可以看做是Vue，React中的Fragment。

<ul>
  <ng-container *ngFor="let item of listdata">
    <li>
      {{item.id}}---{{item.name}}
    </li>
  </ng-container>
</ul>

那如果我想在組件代碼中操作ng-container的實(shí)例呢？

場景：比如在一些復(fù)雜場景中，根據(jù)不同情況將不同的ng-template插入到ng-container中。

<ng-template #myTemp>
    <div>Hello, Tom?</div>
</ng-template>

<div class="container">
    <ng-container #container1>
        Jerry
    </ng-container>
</div>
export class UserComponent implements OnInit, OnChanges, AfterViewInit {
  // 需要加上{ read: TemplateRef},  { read: ViewContainerRef}
  // 否則會(huì)當(dāng)成普通element
  @ViewChild('myTemp', { read: TemplateRef}) temp1!: TemplateRef<any>;
  @ViewChild('container1', { read: ViewContainerRef}) container1!: ViewContainerRef;
  
  ngAfterViewInit(): void {
    console.log(this.temp1);
    this.container1?.createEmbeddedView(this.temp1);
  }
}

動(dòng)態(tài)創(chuàng)建Component

說到ng-container，就不得不提下動(dòng)態(tài)創(chuàng)建Component。

現(xiàn)在有一個(gè)組件MsgComponent，我們想在UserComponent中動(dòng)態(tài)創(chuàng)建出這個(gè)Component。

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-msg',
    template: '<h2>消息:{{msg}}</h2>'
})
export class MsgComponent implements OnInit {
    msg?: string = 'Hello';
    constructor() { }

    ngOnInit() { }
}

還要把這個(gè)MsgComponent在NgModule的entryComponents里注冊(cè)一下。當(dāng)然也可以在Component的entryComponents里注冊(cè)一下也行。

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [
    MsgComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在User組件的template中，需要指定一個(gè)“放”MsgComponent的地方，也就是ng-container。

<div class="container">
  <ng-container #container1>
    Jerry
    <p>Tom</p>
  </ng-container>
</div>
import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { MsgComponent } from '../msg/msg.component';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit, OnChanges, AfterViewInit {
  @ViewChild('container1', { read: ViewContainerRef, static: true}) container1!: ViewContainerRef;

  constructor(private _resolveSvc: ComponentFactoryResolver) {
    
  }

  ngOnInit(): void {
    //  console.log('user: ngOnInit');
    //  this.userID = this.options.id;

    this.createComponent();
  }

  createComponent(): void {
    let fac: ComponentFactory<MsgComponent> = 		       this._resolveSvc.resolveComponentFactory(MsgComponent);

    // this.container1.clear();
    let msgComp: ComponentRef<MsgComponent> = this.container1.createComponent(fac);
    msgComp.instance.msg = '動(dòng)態(tài)創(chuàng)建Component了！';
  }
  
    ngAfterViewInit(): void {
      // this.createComponent();   // { static: false}
    }
}

ComponentFactoryResolver是Angular里組件工廠解析器，把這個(gè)Service注入進(jìn)來就可以使用了。resolveComponentFactory接收一個(gè)Component類型，生成一個(gè)ComponentFactory對(duì)象，為什么需要這個(gè)ComponentFactory，直接用Component類型不行嗎？因?yàn)橐粋€(gè)類型其實(shí)就是一個(gè)Class類，不足以描述一個(gè)Component，Component還有selector，inputs，output等，而這個(gè)ComponentFactory就包含了這些信息。這里用到了設(shè)計(jì)模式中的“工廠模式”，輸入一個(gè)Component Class，輸出一個(gè)對(duì)應(yīng)于這個(gè)ComponentFactory具體信息。

createComponent比較好理解了，基于ComponentFactory具體信息，創(chuàng)建一個(gè)Component，并把這個(gè)Component添加到指定的容器里，還可以指定添加的位置。返回值是組件對(duì)象，注意這里是組件對(duì)象，并不是組件Class的實(shí)例，Class的實(shí)例在組件對(duì)象的instance屬性上。

如果有需要，可以清空容器。

this.container1.clear();

這里的{ static: true}并不是必須的，也可以不寫static，那就用默認(rèn)值false。這個(gè)static之前說過，如果是false的話，由于在ngOnInit生命周期鉤子的時(shí)刻比較早，所以這時(shí)候無法訪問到this.container1，就會(huì)報(bào)錯(cuò)。那static是false的情況下，應(yīng)該做實(shí)現(xiàn)呢？可以在ngAfterViewInit這個(gè)鉤子中實(shí)現(xiàn)。

ngAfterViewInit(): void {
  this.createComponent();
}

但是不建議上面的寫法，因?yàn)樵趎gAfterViewInit里說明View已經(jīng)完成，這里不建議再次操作View，會(huì)影響性能，盡管這樣并不會(huì)報(bào)錯(cuò)。那我就是想在這里再次操作View呢？可以把更新推遲到下一個(gè)更新周期。

ngAfterViewInit(): void {
  setTimeout(() => {
      this.createComponent();
  });

  asyncScheduler.schedule(() => {
     this.createComponent();
  });
}

有沒有感覺上面動(dòng)態(tài)創(chuàng)建Component的過程有點(diǎn)復(fù)雜，開發(fā)者其實(shí)并不關(guān)心ComponentFactoryResolver，ComponentFactory這些細(xì)節(jié)，給你一個(gè)Component類型，給我創(chuàng)建出來Component實(shí)例就行了。在Angular13中，就對(duì)這個(gè)地方做了簡化，不在需要ComponentFactoryResolver，ComponentFactory了。

import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { MsgComponent } from '../msg/msg.component';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit, OnChanges, AfterViewInit {
  @ViewChild('container1', { read: ViewContainerRef, static: true}) container1!: ViewContainerRef;

  // 無需注入ComponentFactoryResolver
  constructor() {
  }
  
  ngAfterViewInit(): void {
    // this.createComponent();
  }

  ngOnInit(): void {
    this.createComponent();
  }

  createComponent(): void {
    // V13簡化
    let msgComp: ComponentRef<MsgComponent> = this.container1.createComponent(MsgComponent);
    msgComp.instance.msg = 'V13動(dòng)態(tài)創(chuàng)建Component了！';
  }
}

大功告成！

到此這篇關(guān)于Angular中ng-template和ng-container的應(yīng)用小結(jié)的文章就介紹到這了,更多相關(guān)Angular中ng-template和ng-container內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論