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

Question

我们可以使用它的选择器在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导入我们要加载的位置。

不确定如何实现此目标，任何正确方向的指针都将非常有帮助。

提前致谢！！

Answer 1

假设您的index.html具有。 然后在条件准备就绪的情况下，在您的.ts或js文件中执行以下操作：var div = document.getElementById（'container'）;

    div.innerHTML = "<my-component></my-component>"

Answer 2

我可以使用以下方法解决此问题，

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;                    
    }
  });
}

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

Answer 3

您可以使用ComponentResolver动态加载任何组件。
将以下html节点添加到父模板中

<div #node></div>

您的组件看起来像

import { Component, ViewContainerRef, ViewChild, ComponentFactory, ComponentResolver } from '@angular/core';
import { MyComponent} from 'components/my.component';

@Component({
selector: 'app-home',
template: `<h2>Home</h2>
    <div #node></div>
 `
})

export class HomeComponent implements OnInit {
@ViewChild("node", { read: ViewContainerRef }) nodeView;
instance: MyComponent
constructor(private componentResolver: ComponentResolver) {
}

ngOnInit(): void {
    this.componentResolver.resolveComponent(MyComponent)
        .then((factory: ComponentFactory<MyComponent>) => {
             this.instance = this.nodeView.createComponent(factory);
        });
    }
}