Angular 2在ngFor中動態創建組件

Question

我的控制器有一個我想要在頁面中的組件列表。 這些其他組件是獨立創建和正常工作的。

在我的HTML模板中：

<ng-container *ngFor="let component of components">
    <div {{component.name}}></div>
</ng-container>

代碼應該像這樣輸出一個<div> ：

<div my-component></div>

但它不是，我收到這個錯誤：

DOMException: Failed to execute 'setAttribute' on 'Element'

如果我只是在div標簽內打印值，它的效果很好：

<div>{{component.name}}</div>

甚至有可能實現我想要的目標嗎？

Answer 1

您可以創建組件工廠並將您需要的那些組件作為條目組件：

組件工廠視圖

<div #dynamicComponentContainer></div>

組件工廠控制器

import {    Component,Input,ViewContainerRef,ViewChild,ReflectiveInjector,ComponentFactoryResolver } from '@angular/core';

import { YourComponent } from './your-component.component';

@Component({
  selector: 'component-factory',
  templateUrl: './component-factory.component.html',
  styleUrls: ['./component-factory.component.css'],
  entryComponents: [ YourComponent ]
})

export class ComponentFactoryComponent {

currentComponent = null;

@ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

// component: Class for the component you want to create
// inputs: An object with key/value pairs mapped to input name/input value
  @Input() set componentData (data: {component: any, inputs: any }) {+    if     (!data) {
  return;
}

// Give you access to the inputs inside the component
let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);

// This will prepare the inject of inputs on the factory
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector);

// Creates a factory
let factory = this.resolver.resolveComponentFactory(data.component);

// Here we inject the inputs on the factory
let component = factory.create(injector);

// This will add the component in the DOM container
this.dynamicComponentContainer.insert(component.hostView);

// This destroys the old component and input the new one
if (this.currentComponent) {
  this.currentComponent.destroy();+    }

this.currentComponent = component;
}

constructor(private resolver: ComponentFactoryResolver) { }

在您要使用的組件上，您需要提供輸入，我們通過Injector執行此操作：

您要使用的組件

import { Component, Input, Injector } from '@angular/core';

@Component({
  selector: 'your-component, [your-component]',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @Input() name: string;
  @Input() label: string;
  @Input() value: string;

  constructor(private injector: Injector) {
    this.name = this.injector.get('name');
    this.label = this.injector.get('label');
    this.value = this.injector.get('value');
  }
}

然后在您的應用程序組件上，或者您想要使用它時：

應用組件視圖

<component-factory [componentData]="componentData"></component-factory>

應用組件控制器

import { Component } from '@angular/core';
import {YourComponent} from  './your-component.component'

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {

  componentData = null;

  constructor() { }

  ngOnInit() {
    this.componentData = {
      component: YourComponent,
      inputs: {
        name: 'example',
        label: 'John Doe',
        value: 'foo'
    }
  }
 }
}