美文网首页
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