成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Angular 2.x+ 如何動(dòng)態(tài)裝載組件

Yi_Zhi_Yu / 3636人閱讀

摘要：如何動(dòng)態(tài)裝載組件在中我們可以使用方法編譯模板達(dá)到動(dòng)態(tài)加載組件的目的，然而在中則沒(méi)有那么簡(jiǎn)單，下面的例子即為動(dòng)態(tài)加載廣告組件的過(guò)程。是創(chuàng)建動(dòng)態(tài)組件較好的選擇，因?yàn)樗粫?huì)渲染多余的輸出。

Angular 2.x+ 如何動(dòng)態(tài)裝載組件 
在 Angular 1.x 中我們可以使用 $compile 方法編譯模板達(dá)到動(dòng)態(tài)加載組件的目的，然而在 ng2 中則沒(méi)有那么簡(jiǎn)單，下面的例子即為動(dòng)態(tài)加載廣告組件的過(guò)程。

live demo

首先，在添加組件前，我們需要定義一個(gè)錨點(diǎn)用于標(biāo)識(shí)組件插入的位置，廣告 banner 組件使用輔助指令 AdDirective 來(lái)標(biāo)識(shí)模板中的有效插入位置。
// src/app/ad.directive.ts
import { Directive, ViewContainerRef } from "@angular/core";

@Directive({
  selector: "[ad-host]",
})

export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}
AdDirective 通過(guò)注入 ViewContainerRef 來(lái)訪問(wèn)作為被插入組件宿主的節(jié)點(diǎn)視圖容器。
class ViewContainerRef { 
  createComponent(componentFactory: ComponentFactory, index?: number, injector?: Injector, projectableNodes?: any[][]) : ComponentRef { }
}


Component 所對(duì)應(yīng)的 ComponentFactory 即是編譯后的 Component 版本，所有與 Angular 運(yùn)行時(shí)的實(shí)際交互都是通過(guò) ComponentFactory 進(jìn)行的


如果在 ViewContainerRef 中創(chuàng)建多個(gè) Component／Template 那么 index 表示當(dāng)前動(dòng)態(tài)組件插入的位置


默認(rèn) Injector 是繼承的，如果需要提供額外的 Provider，則需要使用 Injector 參數(shù)聲明注入器（IoC 容器）



projectableNodes 參數(shù)表示組件的 Transclude




ng-template 就是應(yīng)用 AdDirective 組件的地方，用來(lái)告訴 Angular 動(dòng)態(tài)組件加載到哪里。


// src/app/ad-banner.component.ts (template)
template: `
            

              
Advertisements

              
            

          `
ng-template 是創(chuàng)建動(dòng)態(tài)組件較好的選擇，因?yàn)樗粫?huì)渲染多余的輸出。
AdBannerComponent 使用 AdItem 對(duì)象的數(shù)組作為輸入屬性，并通過(guò) getAds 方法周期性地遍歷 AdItem 對(duì)象數(shù)組，每隔 3s 調(diào)用 loadComponent 方法動(dòng)態(tài)加載組件。


export class AdBannerComponent implements AfterViewInit, OnDestroy {
  @Input() ads: AdItem[];
  currentAddIndex: number = -1;
  @ViewChild(AdDirective) adHost: AdDirective;
  subscription: any;
  interval: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterViewInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() { ... }

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}
loadComponent 選擇某個(gè)廣告對(duì)象后，使用 ComponentFactoryResolver API 為每個(gè)相應(yīng)的組件解析出一個(gè) ComponentFactory 工廠類(lèi)，用于創(chuàng)建組件的實(shí)例。
let adItem = this.ads[this.currentAddIndex];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
這里需要注意的是，ViewContainerRef 只能通過(guò)在構(gòu)造函數(shù)中直接聲明來(lái)注入，因?yàn)?ViewContainerRef 的注入并不通過(guò)注入器，而是由編譯器直接注入的，所以無(wú)法通過(guò) Service 注入。
let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
我們可以調(diào)用 viewContainerRef 的 createComponent 方法實(shí)例化組件，該方法返回被加載的動(dòng)態(tài)組件的引用，我們可以通過(guò)該引用修改組件的屬性或者調(diào)用其方法。
let componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance).data = adItem.data;
同時(shí)這里存在一個(gè)容易誤解的地方就是：創(chuàng)建動(dòng)態(tài)組件必須通過(guò) ViewContainerRef，實(shí)際上并不是，ComponentFactory 本身就具有實(shí)例化組件的能力。
class ComponentFactory {
  create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any) : ComponentRef { }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83130.html

相關(guān)文章

  • Angular 2.x 從0到1 (一）史上最簡(jiǎn)單的Angular2教程

    摘要：官方支持微軟出品，是的超集，是的強(qiáng)類(lèi)型版本作為首選編程語(yǔ)言，使得開(kāi)發(fā)腳本語(yǔ)言的一些問(wèn)題可以更早更方便的找到。第一個(gè)組件那么我們來(lái)為我們的增加一個(gè)吧，在命令行窗口輸入。引導(dǎo)過(guò)程通過(guò)在中引導(dǎo)來(lái)啟動(dòng)應(yīng)用。它們的核心就是。 第一節(jié)：Angular 2.0 從0到1 （一）第二節(jié)：Angular 2.0 從0到1 （二）第三節(jié)：Angular 2.0 從0到1 （三） 第一章：認(rèn)識(shí)Angular...

    tuniutech 評(píng)論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（五）

    摘要：創(chuàng)建一個(gè)工具類(lèi)，負(fù)責(zé)提供以及完成拼接參數(shù)的工作。根據(jù)我們的配置，來(lái)創(chuàng)建這個(gè)文件。因?yàn)槭潜韱翁峤?，所以我們新建一個(gè)服務(wù)，由它來(lái)完成表單提交的最后一步。 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（五） 完善動(dòng)態(tài)表單組件 升級(jí)Angular 4.1 -> 4.3 添加 json-server 模擬數(shù)據(jù) 創(chuàng)建自己的 http 完成一次表單提交 升級(jí)Angu...

    MiracleWong 評(píng)論0 收藏0

  • angular - 收藏集 - 掘金

    摘要：如何在中使用動(dòng)畫(huà)前端掘金本文講一下中動(dòng)畫(huà)應(yīng)用的部分。與的快速入門(mén)指南推薦前端掘金是非常棒的框架，能夠創(chuàng)建功能強(qiáng)大，動(dòng)態(tài)功能的。自發(fā)布以來(lái)，已經(jīng)廣泛應(yīng)用于開(kāi)發(fā)中。 如何在 Angular 中使用動(dòng)畫(huà) - 前端 - 掘金本文講一下Angular中動(dòng)畫(huà)應(yīng)用的部分。 首先，Angular本生不提供動(dòng)畫(huà)機(jī)制，需要在項(xiàng)目中加入Angular插件模塊ngAnimate才能完成Angular的動(dòng)畫(huà)機(jī)制...

    AlexTuan 評(píng)論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（三）

    摘要：使用搭建成熟可靠的后臺(tái)系統(tǒng)三完善動(dòng)態(tài)表單添加樣式。下一章會(huì)講解，一個(gè)集成的服務(wù)，來(lái)完成我們的提交，在將來(lái)的篇章里會(huì)在我們的組件中加入使其變得更加靈活。 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin（三） 完善動(dòng)態(tài)表單 添加樣式。 抽離組件。 添加組件樣式 上一篇文章創(chuàng)建了兩個(gè)，組件，現(xiàn)在使用bootstrap來(lái)給他們添加一些樣式 首先需要一個(gè)公用的 s...

    張憲坤 評(píng)論0 收藏0

  • Angular 4 簡(jiǎn)單入門(mén)筆記

    摘要：首先，我們需要在入口頁(yè)面的中配置根路徑然后創(chuàng)建一個(gè)路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁(yè)面中需要一個(gè)容器去承載上面代碼中的定義了用戶(hù)點(diǎn)擊后的路由跳轉(zhuǎn)，定義該路由激活時(shí)的樣式類(lèi)。 剛實(shí)習(xí)的時(shí)候用過(guò)AngularJS，那時(shí)候真的是連原生JavaScript都不會(huì)寫(xiě)，依樣畫(huà)葫蘆做了幾個(gè)管理后臺(tái)。然后突然換項(xiàng)目了，AngularJS就不寫(xiě)了，感覺(jué)前前后后接觸了一年多的Angula...

    whlong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<