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

在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> ？

解决方法:

在ngComponentOutlet的pull请求中讨论了这样的功能,但现在已被删除.
甚至当前在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 dynamic tabs with user-click chosen components所示

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