使用選擇器在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);
        });
    }
}