0

我有一些代码可以在 ngfor 循环中从组件类型呈现一组组件

  <div class="outlet">
            <app-customer-personal-details [selectedCustomer]="selectedCustomer"></app-customer-personal-details>
            <ng-template *ngFor="let formComponent of (addedFormComponents$ | async); trackBy: formIdAndOrder"
            [ngComponentOutlet]="formComponent.component">
            </ng-template>
  </div>

以上formComponent.component是Type<GenericFormComponent>

当我运行它时，它会很好地呈现，并且组件会按应有的方式创建。但是当我尝试获取这些组件的列表以便我可以访问实例时，我一直不确定；

我试图做的。

最明显的

    // doesnt work returns empty list
    @ViewChildren(GenericFormComponent) formComponents: QueryList<GenericFormComponent>;

然后我也试过了

// Doesnt work returns empty list
@ViewChildren(TemplateRef, {read: GenericFormComponent}) formComponents: QueryList<GenericFormComponent>;

我还尝试使用为我的组件提供注入令牌

@Component({
    selector: 'app-observation',
    templateUrl: './observation.component.html',
    styleUrls: ['./observation.component.scss'],
    providers: [
        { provide: GenericFormComponent, useExisting: ObservationComponent }
    ]
})
export class ObservationComponent extends GenericFormComponent implements OnInit {

这些方法都不起作用。

是否可以访问使用 ngfor ngComponentOutlet 创建的组件？

请注意，这是在 Angular 11 上。

4

1 回答 1

0

我在 stackblitz 的这个 repo 中提出了一个解决方案

您可以通过将组件动态添加到ViewContainerRef. 但是，我没有运气使用 using ngComponentOutlet，我最好的猜测是 Ivy 要求使用“提前类型分析”模板才能编译它需要静态分析您的模板

不过要提醒一句：这种技术确实会影响 Ivy，我不完全确定，但它可能会导致 AOT/SSR 和生产构建出现问题，因此请小心使用它。

于 2021-01-18T02:24:10.667 回答