使用选择器在Angular 2中动态加载组件

发布时间：2020-12-17 07:52:23 所属栏目：安全来源：网络整理

导读：我们可以使用它的选择器在Angular 2中动态加载组件吗？可以说我们有一个如下组件, @Component({ moduleId: module.id,selector: 'my-component',templateUrl: 'my-component.html',styleUrls: ['my-component.css'] }) export class MyComponent{ } 我们可

我们可以使用它的选择器在Angular 2中动态加载组件吗？

可以说我们有一个如下组件,

@Component({
    moduleId: module.id,selector: 'my-component',templateUrl: 'my-component.html',styleUrls: ['my-component.css']   
 })
 export class MyComponent{
 }

我们可以使用它的选择器my-component将其动态加载到容器中

<div #container ></div>

LoadComponent(selector: string){
    // Load using selector?
}

可能需要在NgModule中导出组件并导入我们想要加载它的NgModule.

不确定如何实现这一点,任何正确方向的指针都会非常有用.

提前致谢！！

好吧,我能够使用下面解决这个问题,

constructor(private _compiler: Compiler) {}

loadComponent = (selector: string,module: any): void => {  
  this._compiler.compileModuleAndAllComponentsAsync(module).then(_module => {
    let _componentFactories = _module.componentFactories.filter(_c => {
      // here I am using the selector
      return _c.selector === selector;
    });

    // check if component is available in the module
    if (!!_componentFactories && _componentFactories.length > 0) {
       self.testComponentContainer.clear();
       self.testComponentContainer.createComponent(_componentFactories[0]).instance;                    
    }
  });
}

希望它可以帮助某人.. !!!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!