国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Yi_Zhi_Yu / 3639人閱讀

摘要：如何動態(tài)裝載組件在中我們可以使用方法編譯模板達(dá)到動態(tài)加載組件的目的，然而在中則沒有那么簡單，下面的例子即為動態(tài)加載廣告組件的過程。是創(chuàng)建動態(tài)組件較好的選擇，因?yàn)樗粫秩径嘤嗟妮敵觥?/p>

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

live demo

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

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

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


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


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


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



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




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


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

              
Advertisements

              
            

          `
ng-template 是創(chuàng)建動態(tài)組件較好的選擇，因?yàn)樗粫秩径嘤嗟妮敵觥?p>AdBannerComponent 使用 AdItem 對象的數(shù)組作為輸入屬性，并通過 getAds 方法周期性地遍歷 AdItem 對象數(shù)組，每隔 3s 調(diào)用 loadComponent 方法動態(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è)廣告對象后，使用 ComponentFactoryResolver API 為每個(gè)相應(yīng)的組件解析出一個(gè) ComponentFactory 工廠類，用于創(chuàng)建組件的實(shí)例。
let adItem = this.ads[this.currentAddIndex];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
這里需要注意的是，ViewContainerRef 只能通過在構(gòu)造函數(shù)中直接聲明來注入，因?yàn)?ViewContainerRef 的注入并不通過注入器，而是由編譯器直接注入的，所以無法通過 Service 注入。
let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
我們可以調(diào)用 viewContainerRef 的 createComponent 方法實(shí)例化組件，該方法返回被加載的動態(tài)組件的引用，我們可以通過該引用修改組件的屬性或者調(diào)用其方法。
let componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance).data = adItem.data;
同時(shí)這里存在一個(gè)容易誤解的地方就是：創(chuàng)建動態(tài)組件必須通過 ViewContainerRef，實(shí)際上并不是，ComponentFactory 本身就具有實(shí)例化組件的能力。
class ComponentFactory {
  create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any) : ComponentRef { }
}

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83130.html

相關(guān)文章

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

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

    tuniutech 評論0 收藏0

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

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

    MiracleWong 評論0 收藏0

  • angular - 收藏集 - 掘金

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

    AlexTuan 評論0 收藏0

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

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

    張憲坤 評論0 收藏0

  • Angular 4 簡單入門筆記

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

    whlong 評論0 收藏0

發(fā)表評論

0條評論

Yi_Zhi_Yu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<