angular 4 为 ngComponentOutlet 动态创建的组件分配@Input

Question

在 Angular 4 中动态创建一个组件，您可以使用 ngComponentOutlet 指令： https ://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html

是这样的：

动态组件

@Component({
  selector: 'dynamic-component',
  template: `
     Dynamic component
  `
})
export class DynamicComponent {
  @Input() info: any;
}

应用程序

@Component({
  selector: 'my-app',
  template: `
     App<br>
     <ng-container *ngComponentOutlet="component"></ng-container>
  `
})
export class AppComponent {
  this.component=DynamicComponent;
}

如何在此模板中传递 @Input() info: any; 信息 <ng-container *ngComponentOutlet="component"></ng-container> ？

原文由 Doua Beri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此类功能在 ngComponentOutlet 的拉取请求中进行了讨论，但现在已删除。即使是目前在 https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html 中显示的 componentRef 也不是公开的，因此 https://github 不可用。 com/angular/angular/blob/3ef73c2b1945340ca6bd21f1790260c88698ae26/modules/%40angular/common/src/directives/ng_component_outlet.ts#L78

我建议您创建自己的指令，该指令源自 https://github.com/angular/angular/blob/3ef73c2b1945340ca6bd21f1790260c88698ae26/modules/%40angular/common/src/directives/ng_component_outlet.ts#L72

并为输入分配值，如 Angular 2 动态选项卡中所示，用户单击所选组件

this.compRef.instance.someProperty = 'someValue';

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议