Question

@Component({
   selector: 'dynamic',
   template: '<ng-template *ngFor="let portal of portals" [cdkPortalOutlet]="portal"></ng-template>',
   // entryComponents before Ivy
   entryComponents: [Component1, Component2, Component3]
})
class DynamicComponent<T extends BaseComponentClass>() {
    portals: ComponentPortal<any>[] = [];

    constructor(@Inject(COMPONENTS_TOKEN) components: T[]) {
        // Something like this
        this.portals = components.map(c => new ComponentPortal(c));
    }
}

@NgModule({
    declarations: [
        DynamicComponent
        Component1,
        Component2,
        Component3,
    ],
    imports: [PortalModule, CommonModule, MyOtherModule]
})

我有一个类似上面的组件，可以使用ComponentPortal和cdkPortalOutlet动态创建。 DynamicComponent本身具有许多它创建的出口和组件。以前使用entryComponents，我将列出可以加载到DynamicComponents插座中的每个组件。这可以按预期工作，但是现在升级到Ivy并删除不推荐使用的entryComponents之后，此操作不再起作用。我创建了DynamicComponent，并且初始化很好，但是DynamicComponent内的组件似乎并未创建，并导致整个DynamicComponent的渲染失败。如果我删除了DynamicComponent中的出口，那么DynamicComponent中的其他所有内容都会变得很好。

我的想法是，创建DynamicComponent时，它的依赖项组件无法解决。相关性组件未在任何其他角度组件中使用。我是否缺少有关如何将旧的entryComponent行为转换为与Ivy一起使用的东西？

编辑： "buildOptimizer": false对其进行了修复，但理想情况下仍要继续进行。

Answer 1

您可以在entryComponents类中创建DynamicComponent数组，在其中列出其他地方未引用的组件，例如：

class DynamicComponent<T extends BaseComponentClass>() {
    entryComponents = [Component1, Component2, Component3];
    ...

即使没有使用任何变量，引用组件的事实也可以防止它们被树震动。在此Angular GitHub issue上，您会看到有关此类问题的有趣讨论以及可能的解决方案。

Angular 9 Ivy entryComponents转换

1 个答案: