Question

以下代码段与 *ngComponentOutlet 一起用于显示。

我有以下工作代码：

this.displayComponent({
        'objects':[
                {component: ToDisplayAComponent, expanded: false},
                {component: ToDisplayBComponent, expanded: false}
                ]
    })

然后使用*ngFor迭代对象值数组，并显示我的组件。

我想要做的是以下不起作用（在数组中传入相同抽象组件的不同实例，用不同的属性初始化）：

let compA = new ToDisplayAComponent(aProperty);
let compB = new ToDisplayAComponent(anotherPropert);
this.displayComponent({
            'objects':[
                    {component: compA, expanded: false},
                    {component: compB, expanded: false}
                    ]
        });

除了我的问题的解决方案，我真的很感激，我也很感兴趣，会发生什么，上面的代码不起作用。

PS编译但会抛出此错误：

ERROR Error: No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?

Answer 1

Angular编译器读取您在entryComponents的{{1}}中指定的组件，并为它们创建工厂。然后@NgModule指令使用ngComponentOutlet来获取这些工厂，然后创建组件实例。以下是来源的相关代码：

componentFactoryResolver

现在，自从您第一个示例作品以来，我假设您已将@Directive({selector: '[ngComponentOutlet]'}) export class NgComponentOutlet implements OnChanges, OnDestroy { @Input() ngComponentOutlet: Type<any>; ngOnChanges(changes: SimpleChanges) { ... const componentFactory=componentFactoryResolver.resolveComponentFactory(this.ngComponentOutlet); this._componentRef=this._viewContainerRef.createComponent(componentFactory,...)和ToDisplayAComponent添加到这样的条目组件中：

ToDisplayAComponent

所以当@NgModule({ entryComponents: [ ToDisplayAComponent, ToDisplayBComponent ]提出要求时：

resolveComponentFactory（this.ngComponentOutlet）

componentOutlet包含一个类引用this.ngComponentOutlet，因此它与您在ToDisplayAComponent中指定的内容成功匹配：

entryComponents

但是，在你的第二个例子中，你没有传递类引用，你传递实例，显然它们不匹配：

entryComponents[0] === this.ngComponentOutlet (ToDisplayAComponent)

这就是Angular报告组件工厂在条目组件中找不到的错误的原因。

您要做的事情无法完成。您无法将自定义参数传递给组件类构造函数，因为它在依赖项注入上下文中实例化。因此，如果您需要将某些内容传递给组件类构造函数，则定义一个提供程序。

要了解有关动态组件的详情，请阅读Here is what you need to know about dynamic components in Angular

Angular 4 - * ngComponentOutlet需要澄清

1 个答案: