Angular 2.x+ 如何動態裝載組件

Yi_Zhi_Yu 發布于2019-08-20 16:45 / 3625人閱讀

摘要：如何動態裝載組件在中我們可以使用方法編譯模板達到動態加載組件的目的，然而在中則沒有那么簡單，下面的例子即為動態加載廣告組件的過程。是創建動態組件較好的選擇，因為它不會渲染多余的輸出。

Angular 2.x+ 如何動態裝載組件

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

live demo

首先，在添加組件前，我們需要定義一個錨點用于標識組件插入的位置，廣告 banner 組件使用輔助指令 AdDirective 來標識模板中的有效插入位置。

// src/app/ad.directive.ts
import { Directive, ViewContainerRef } from "@angular/core";

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

export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

AdDirective 通過注入 ViewContainerRef 來訪問作為被插入組件宿主的節點視圖容器。

class ViewContainerRef { 
  createComponent(componentFactory: ComponentFactory, index?: number, injector?: Injector, projectableNodes?: any[][]) : ComponentRef { }
}

Component 所對應的 ComponentFactory 即是編譯后的 Component 版本，所有與 Angular 運行時的實際交互都是通過 ComponentFactory 進行的

如果在 ViewContainerRef 中創建多個 Component／Template 那么 index 表示當前動態組件插入的位置

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

projectableNodes 參數表示組件的 Transclude

ng-template 就是應用 AdDirective 組件的地方，用來告訴 Angular 動態組件加載到哪里。

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

ng-template 是創建動態組件較好的選擇，因為它不會渲染多余的輸出。

AdBannerComponent 使用 AdItem 對象的數組作為輸入屬性，并通過 getAds 方法周期性地遍歷 AdItem 對象數組，每隔 3s 調用 loadComponent 方法動態加載組件。

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 選擇某個廣告對象后，使用 ComponentFactoryResolver API 為每個相應的組件解析出一個 ComponentFactory 工廠類，用于創建組件的實例。

let adItem = this.ads[this.currentAddIndex];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

這里需要注意的是，ViewContainerRef 只能通過在構造函數中直接聲明來注入，因為 ViewContainerRef 的注入并不通過注入器，而是由編譯器直接注入的，所以無法通過 Service 注入。

let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();

我們可以調用 viewContainerRef 的 createComponent 方法實例化組件，該方法返回被加載的動態組件的引用，我們可以通過該引用修改組件的屬性或者調用其方法。

let componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance).data = adItem.data;

同時這里存在一個容易誤解的地方就是：創建動態組件必須通過 ViewContainerRef，實際上并不是，ComponentFactory 本身就具有實例化組件的能力。

class ComponentFactory {
  create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any) : ComponentRef { }
}

云服務器 GPU云服務器 vuejs動態組件父子組件-動態渲染動態添加組件微信泛型動態添加組件c

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83130.html

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

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

tuniutech 2019-08-20 13:58 評論0 收藏0
使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin（五）

摘要：創建一個工具類，負責提供以及完成拼接參數的工作。根據我們的配置，來創建這個文件。因為是表單提交，所以我們新建一個服務，由它來完成表單提交的最后一步。使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin（五）完善動態表單組件升級Angular 4.1 -> 4.3 添加 json-server 模擬數據創建自己的 http 完成一次表單提交升級Angu...

MiracleWong 2019-08-21 18:36 評論0 收藏0
angular - 收藏集 - 掘金

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

AlexTuan 2019-08-20 17:19 評論0 收藏0
使用ng2-admin搭建成熟可靠的后臺系統 -- ng2-admin（三）

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

張憲坤 2019-08-21 18:00 評論0 收藏0
Angular 4 簡單入門筆記

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

whlong 2019-08-20 17:44 評論0 收藏0