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

我能够通过以下方式解决这个问题，

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 2

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

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

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

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

3 个答案: