建站
咨詢
售后
建站咨詢
新聞中心
動(dòng)態(tài)組件加載器
譯注：本頁講的是一個(gè)用于顯示廣告的范例，而部分廣告攔截器插件，比如 Chrome 的 AdGuard，可能會(huì)破壞其工作邏輯，因，請?jiān)诒卷撽P(guān)閉那些插件。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站制作、仙游網(wǎng)絡(luò)推廣、小程序制作、仙游網(wǎng)絡(luò)營銷、仙游企業(yè)策劃、仙游品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供仙游建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
組件的模板不會(huì)永遠(yuǎn)是固定的。應(yīng)用可能會(huì)需要在運(yùn)行期間加載一些新的組件。這本烹飪書為你展示如何使用 ?ComponentFactoryResolver ?來動(dòng)態(tài)添加組件。
到現(xiàn)場演練 / 下載范例查看本節(jié)的源碼。
動(dòng)態(tài)組件加載
下面的例子展示了如何構(gòu)建動(dòng)態(tài)廣告條。
英雄管理局正在計(jì)劃一個(gè)廣告活動(dòng)，要在廣告條中顯示一系列不同的廣告。幾個(gè)不同的小組可能會(huì)頻繁加入新的廣告組件。 再用只支持靜態(tài)組件結(jié)構(gòu)的模板顯然是不現(xiàn)實(shí)的。
你需要一種新的組件加載方式，它不需要在廣告條組件的模板中引用固定的組件。
Angular 自帶的 API 就能支持動(dòng)態(tài)加載組件。
指令
在添加組件之前，先要定義一個(gè)錨點(diǎn)來告訴 Angular 要把組件插入到什么地方。
廣告條使用一個(gè)名叫 ?AdDirective ?的輔助指令來在模板中標(biāo)記出有效的插入點(diǎn)。
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[adHost]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}?AdDirective ?注入了 ?ViewContainerRef ?來獲取對容器視圖的訪問權(quán)，這個(gè)容器就是那些動(dòng)態(tài)加入的組件的宿主。
在 ?@Directive? 裝飾器中，要注意選擇器的名稱：?ad-host?，它就是你將應(yīng)用到元素上的指令。下一節(jié)會(huì)展示該如何做。
加載組件
廣告條的大部分實(shí)現(xiàn)代碼都在 ?ad-banner.component.ts? 中。 為了讓這個(gè)例子簡單點(diǎn)，HTML 被直接放在了 ?@Component? 裝飾器的 ?template ?屬性中。
?AdDirective?，回憶一下來自 ?ad.directive.ts? 的選擇器 ?ad-host?。把它應(yīng)用到 ?
template: `
Advertisements
?
解析組件
深入看看 ?ad-banner.component.ts? 中的方法。
?AdBannerComponent ?接收一個(gè) ?AdItem ?對象的數(shù)組作為輸入，它最終來自 ?AdService?。 ?AdItem ?對象指定要加載的組件類，以及綁定到該組件上的任意數(shù)據(jù)。 ?AdService ?可以返回廣告活動(dòng)中的那些廣告。
給 ?AdBannerComponent ?傳入一個(gè)組件數(shù)組可以在模板中放入一個(gè)廣告的動(dòng)態(tài)列表，而不用寫死在模板中。
通過 ?getAds()? 方法，?AdBannerComponent ?可以循環(huán)遍歷 ?AdItems ?的數(shù)組，并且每三秒調(diào)用一次 ?loadComponent()? 來加載新組件。
export class AdBannerComponent implements OnInit, OnDestroy {
@Input() ads: AdItem[] = [];
currentAdIndex = -1;
@ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
interval: number|undefined;
ngOnInit() {
this.loadComponent();
this.getAds();
}
ngOnDestroy() {
clearInterval(this.interval);
}
loadComponent() {
this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
const adItem = this.ads[this.currentAdIndex];
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(adItem.component);
componentRef.instance.data = adItem.data;
}
getAds() {
this.interval = setInterval(() => {
this.loadComponent();
}, 3000);
}
} 這里的 ?loadComponent()? 方法很重要。 來一步步看看。首先，它選取了一個(gè)廣告。
?
loadComponent()? 如何選擇廣告
?
loadComponent()? 方法使用某種算法選擇了一個(gè)廣告。
（譯注：循環(huán)選取算法）首先，它把 ?
currentAdIndex?遞增一，然后用它除以 ?
AdItem?數(shù)組長度的
余數(shù)作為新的 ?
currentAdIndex?的值， 最后用這個(gè)值來從數(shù)組中選取一個(gè) ?
adItem?。
接下來，你要把 ?viewContainerRef ?指向這個(gè)組件的現(xiàn)有實(shí)例。但你怎么才能找到這個(gè)實(shí)例呢？ 很簡單，因?yàn)樗赶蛄?nbsp;?adHost?，而這個(gè) ?adHost ?就是你以前設(shè)置過的指令，用來告訴 Angular 該把動(dòng)態(tài)組件插入到什么位置。
回憶一下，?AdDirective ?曾在它的構(gòu)造函數(shù)中注入了一個(gè) ?ViewContainerRef?。 因此這個(gè)指令可以訪問到這個(gè)你打算用作動(dòng)態(tài)組件宿主的元素。
要把這個(gè)組件添加到模板中，你可以調(diào)用 ?ViewContainerRef ?的 ?createComponent()?。
?createComponent()? 方法返回一個(gè)引用，指向這個(gè)剛剛加載的組件。 使用這個(gè)引用就可以與該組件進(jìn)行交互，比如設(shè)置它的屬性或調(diào)用它的方法。
公共的 AdComponent 接口
在廣告條中，所有組件都實(shí)現(xiàn)了一個(gè)公共接口 ?AdComponent?，它定義了一個(gè)標(biāo)準(zhǔn)化的 API，來把數(shù)據(jù)傳給組件。
下面就是兩個(gè)范例組件及其 ?AdComponent ?接口：
- hero-job-ad.component.ts
import { Component, Input } from '@angular/core';
import { AdComponent } from './ad.component';
@Component({
template: `
{{data.headline}}
{{data.body}}
`
})
export class HeroJobAdComponent implements AdComponent {
@Input() data: any;
}import { Component, Input } from '@angular/core';
import { AdComponent } from './ad.component';
@Component({
template: `
Featured Hero Profile
{{data.name}}
{{data.bio}}
Hire this hero today!
`
})
export class HeroProfileComponent implements AdComponent {
@Input() data: any;
}export interface AdComponent {
data: any;
}最終的廣告欄
最終的廣告欄是這樣的：
文章名稱：創(chuàng)新互聯(lián)Angular教程：Angular 動(dòng)態(tài)組件
文章路徑：http://m.5511xx.com/article/djpcedo.html
