美文网首页
ionic3 动态加载组件

ionic3 动态加载组件

作者: 南京确善能 | 来源:发表于2018-08-07 11:38 被阅读0次

template:

<div  #child></div>

ts:

@ViewChild("child",{read:ViewContainerRef})  child:ViewContainerRef;
childComponent:ComponentRef<MonitoringDataComponent>;
childCompFactory:ComponentFactory<MonitoringDataComponent>

//加载组件
this.childCompFactory=this.resolver.resolveComponentFactory(MonitoringDataComponent);
this.childComponent=this.child.createComponent(this.childCompFactory); 

//销毁组件
this.childComponent.destroy();

声明周期:
在ionViewDidLoad,ionViewWillEnter,ionViewDidEnter这三个钩子函数中均可以加载,在constructor中无法加载,ViewContainerRef为undefind。

注意问题:
如果放在ngif或者ngswitch case中,则需要延时加载

获取子组件实例:

this.childComponent.instance

相关文章

网友评论

      本文标题:ionic3 动态加载组件

      本文链接:https://www.haomeiwen.com/subject/dmyovftx.html