大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关angular9中如何实现组件动态加载,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司是一家专注于成都网站建设、网站设计与策划设计,仲巴网站建设哪家好?创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:仲巴等地区。仲巴做网站价格咨询:13518219792
在添加组件之前,先要定义一个锚点来告诉 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
Advertisements
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); (componentRef.instance).data = adItem.data; } }
src/dynamic-banner/ad-item.ts
import { Type } from '@angular/core'; export class AdItem { constructor(public component: Type, 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中如何实现组件动态加载”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。