这篇文章将为大家详细讲解有关angular9中如何实现组件动态加载，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在添加组件之前，先要定义一个锚点来告诉 Angular 要把组件插入到什么地方。
在src/dynamic-banner/ad.directive.ts下
计算
安全
数据库
网络和加速
企业服务
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[ad-host]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}AdDirective 注入了 ViewContainerRef 来获取对容器视图的访问权，这个容器就是那些动态加入的组件的宿主。
在 @Directive 装饰器中，要注意选择器的名称：ad-host，它就是你将应用到元素上的指令。
相关推荐：《angular教程》
src/dynamic-banner/ad-banner.component.html
<div class="ad-banner-example">
<h4>Advertisements</h4>
<ng-template ad-host></ng-template>
</div>src/dynamic-banner/ad-banner.component.ts
import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy, SimpleChanges } from '@angular/core';
import { AdDirective } from './ad.directive';
import { AdItem } from './ad-item';
import { AdComponent } from './ad.component';
import { componentMap } from './component/utils';
@Component({
selector: 'app-ad-banner',
templateUrl: './ad-banner.component.html',
// styleUrls: ['./ad-banner.component.css']
})
export class AdBannerComponent implements OnInit {
@Input() type: string = 'ad1' // 传入的key,确定加载那个组件
@Input() data: any = {} // 传入组件的数据
@ViewChild(AdDirective, {static: true}) adHost: AdDirective; // 动态组件的指令
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
ngOnInit() {
this.loadComponent();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['type']) this.loadComponent()
}
loadComponent() {
// adItem 要加载的组件类，以及绑定到该组件上的任意数据
const adItem = new AdItem(componentMap[this.type], this.data)
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;
}
}src/dynamic-banner/ad-item.ts
import { Type } from '@angular/core';
export class AdItem {
constructor(public component: Type<any>, public data: any) {}
}src/dynamic-banner/ad.component.ts
import { Type } from '@angular/core';
export interface AdComponent {
data: any;
}src/dynamic-banner/share.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componets } from './component/utils';
import { AdDirective } from './ad.directive';
import { AdBannerComponent } from './ad-banner.component';
@NgModule({
imports: [
CommonModule
],
exports:[
[...componets],
AdDirective,
AdBannerComponent,
],
declarations: [
[...componets],
AdDirective,
AdBannerComponent,
],
entryComponents: [
[...componets]
]
})
export class ShareModule { }src/dynamic-banner/component/utils.ts
import { HeroProfileComponent } from "./hero-profile.component";
import { HeroJobAdComponent } from './hero-job-ad.component';
const componentMap = {
ad1: HeroProfileComponent,
ad2: HeroJobAdComponent
}
const componets = [
HeroProfileComponent,
HeroJobAdComponent
]
export {componets, componentMap}
关于“angular9中如何实现组件动态加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
