Angular中动态创建组件

本文介绍了在Angular中动态创建组件的方法,包括创建组件、创建容器组件、动态插入组件、设置组件属性、销毁组件以及组件注册的步骤。动态创建组件能有效解决模板中根据条件显示组件的问题,减少代码复杂性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

动态创建组件

通常来说组件不需要动态来创建,因为直接在模板中使用可以满足大部分的需求。可是如果有这样的需求
模板中存在多个组件是否显示依赖特定的条件,那么就需要定义多个bool类型的变量来控制,而且还需要考虑bool类型变量
的修改,这样操作起来比较繁琐。这个时候可以考虑使用动态创建组件的方式。大致流程如下所示。

创建组件

@Component({
  template: `<span>hello world</span>`
})
export class DynamicComponent { }

创建容器组件

@Component({
  selector: 'app-container',
  template: `
    <div #dynamicContainer></div>
    <button (click)="createComponent()">Create</button>
  `
})
export class AppContainerComponent {
  @ViewChild("dynamicContainer", { read: ViewContainerRef }) container: ViewContainerRef;
}

在AppContainerComponent组件中,通过@ViewChild装饰器来获取视图中的模板元素,如果没有指定第二个查询参数,则默认返回
组件实例或相应的DOM元素,但这个示例中,我们需要获取ViewContainerRef实例也就是视图容器。可以在视图容器中创建、插入、删除组件等。

动态创建组件

在创建组件之前,需要注入ComponentFactoryResolver服务对象,该服务是动态加载组件的核心,可以将一个组件实例呈现到另一个
组件视图上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值