Angular 如何将 @Input 与使用 ComponentFactoryResolver 创建的组件一起使用

发布于09月02日

有没有一种方法可以用来在动态创建的Angular 2组件上定义@input属性？

我使用ComponentFactoryResolver在容器组件中创建组件.例如:

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);

let componentRef = entryPoint.createComponent(componentFactory);

其中"entryPoint"在组件HTML中是这样的:

<div #entryPoint></div>

并在我的容器组件中定义为:

@ViewChild('entryPoint', { read: ViewContainerRef } entryPoint: ViewContainerRef;

这可以很好地工作，但是我找不到使@input属性在新创建的组件上工作的方法.我知道您可以在Component类上显式设置公共属性，但这似乎不适用于ng-Reflect.在进行此更改之前，我有一个用"@input()"装饰的"Selected"属性，该属性导致ANGLE将以下内容添加到DOM:

<my-component ng-reflected-selected="true"></my-component>

有了它，我可以动态更新标记以切换CSS类:

<div class="header" [class.active-header]="selected === true"></div>

通过一些搜索，我找到了一种方法，可以让"@Output"按预期工作，但我还没有找到@Input的任何内容.

让我知道，如果额外的背景将是有益的，我很乐意添加它.

Angular 如何将 @Input 与使用 ComponentFactoryResolver 创建的组件一起使用

推荐答案

Angular相关问答推荐

Angular独立组件(使用LoadComponents)-懒惰加载服务不工作

如何避免使用CSS动画制作的幻灯片中闪烁？

布局之间的Angular 变化检测需要重新加载

如何在Angular中执行一个操作条件为多个可观测值？

具有多个输入的Angular struct 指令在第一次加载构件时没有值

Angular 懒惰地加载一个服务

使用 Electron 打包器打包 Electron Angular 应用程序时无法加载资源

NGX-Translate如何不得到404？

在ngOninit方法中直接VS初始化属性

PrimeNG 避免在同一位置使用不同键的 cogo toast 重叠

应该显示在表格中的嵌套循环

Angular combinelatest使用没有初始值的主题

过滤 ngfor Angular 的计数

Angular 4：InvalidPipeArgument：管道AsyncPipe的[object Object]

使用 Angular 2 新路由更改页面标题

如何将一个组件放入Angular2中的另一个组件中？

Angular 2 Material Design 组件是否支持布局指令？

如何在悬停时向元素添加类？

Angular 2 router.navigate

为什么 ngOnInit 被调用两次？