文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

angular9中如何实现组件动态加载

2023-06-14 06:43

关注

这篇文章将为大家详细讲解有关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教程》

动态组件的核心代码

动态组件加载的html

src/dynamic-banner/ad-banner.component.html

<div class="ad-banner-example">  <h4>Advertisements</h4>  <ng-template ad-host></ng-template></div>

动态组件的ts

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;  }}

ad-item.ts

src/dynamic-banner/ad-item.ts

import { Type } from '@angular/core';export class AdItem {  constructor(public component: Type<any>, public data: any) {}}

ad.component.ts

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中如何实现组件动态加载

关于“angular9中如何实现组件动态加载”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯