问在Angular 5中渲染任意组件

EN

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

class MyWidget {
  name: string;
  content: any; // This could be any component

  constructor(name: string, content: any) {
    this.name = name;
    this.content = content;
  }
}

// Final destination ----------------------------------
@Component({
  selector: 'grandchild',
  template: `
    <h1>{{ myWidget.name }}</h1>
    <!-- render myWidget.content here -->
  `
})
export class GrandchildComponent {
  @Input() myWidget: MyWidget;
}
// ----------------------------------------------------

// Child ----------------------------------------------
@Component({
  selector: 'child',
  template: `
    <div>
      <grandchild *ngFor="let w of myWidgetList" [myWidget]="w"></grandchild>
    </div>
  `
})
export class ChildComponent {
  @Input() myWidgetList: MyWidget[];
}
// ----------------------------------------------------


// Some random components to illustrate ---------------
@Component({
  selector: 'random-foo',
  template: 'I\'m random foo'
})
export class RandomFooComponent {
}

@Component({
  selector: 'random-bar',
  template: 'I\'m random bar'
})
export class RandomBarComponent {
}
// ----------------------------------------------------

@Component({
  selector: 'app-root',
  template: '<child [myWidgetList]="list"></child>'
})
export class AppComponent {
  list = [
    new MyWidget('a', RandomFooComponent),
    new MyWidget('b', RandomBarComponent)
  ];
}