angular 4+为ngComponentOutlet动态创建的组件分配@Input [英] angular 4+ assign @Input for ngComponentOutlet dynamically created component

问题描述

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

In Angular 4 to dynamically create a component you can use ngComponentOutlet directive: 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;
}

App

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

如何传递 @Input（）信息： any; 此模板中的信息< ng-container * ngComponentOutlet =component>< / ng-container> ？

How do I pass @Input() info: any; information in this template <ng-container *ngComponentOutlet="component"></ng-container> ?

推荐答案

这个功能在 ngComponentOutlet 的拉取请求中进行了讨论，但是已被删除现在。
即使是<$ href =https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-中显示的 componentRef directive.htmlrel =nofollow noreferrer> https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html 不公开，因此无法使用 https://github.com/ angular / angular / blob / 3ef73c2b1945340ca6bd21f1790260c88698ae26 / modules /%40angular / common / src / directives / ng_component_outlet.ts＃L78

Such a feature was discussed in the pull request for ngComponentOutlet but was dropped for now. Even the componentRef shown currently in https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html is not public and therefore not available 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/%40a ngular / common / src / directives / ng_component_outlet.ts＃L72

I'd suggest you create your own directive derived from https://github.com/angular/angular/blob/3ef73c2b1945340ca6bd21f1790260c88698ae26/modules/%40angular/common/src/directives/ng_component_outlet.ts#L72

并为输入分配值，如 Angular 2动态标签，用户点击所选组件

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

这篇关于angular 4+为ngComponentOutlet动态创建的组件分配@Input的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！