浅谈angular9中组件动态加载的实现方法-木庄网络博客

2022-02-10 02:44:17 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

按条件加载组件，实现组件的灵活切换，减少大量ngIf的使用，在angular中也是比较常见的操作。本篇文章就来大家一起交流一下angular组件的动态使用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

指令的创建

在添加组件之前，先要定义一个锚点来告诉 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，它就是你将应用到元素上的指令。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 浅谈angular9中组件动态加载的实现方法

浅谈angular9中组件动态加载的实现方法

指令的创建

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论