Angular 动态组件访问属性

Question

我希望得到一些帮助。

我需要在PrimeNG的TabView中动态创建一些新选项卡，其中充满了组件。它可以很好地显示所有组件，但我如何访问它们的属性？

我的开发基于 https://angular.io/guide/dynamic-component-loader 和 https://angular.io/api/core/ViewContainerRef#createComponent 使用示例显示在底部

bookingView.html 包含：

<p-tableView>
  <p-tabPanel *ngFor="let tab of tabs">
    <ng-container *ngComponentOutlet="tab.component"></ng-container
  </p-tabPanel>
</p-tableView>

面板的定义存储在Service bookingService.ts中：

getAllInitialTabs() {
   return [
    {
      title: "BookingOverview",
      component: BookingOverviewComponent,
    },
    {
      title: "BookingDetails for US",
      component: BookingDetailsComponent,
    },
    {
      title: "BookingDetails for GER",
      component: BookingDetailsComponent,
   }
] as {title: string, component: Type<any>}[];

在我的主要组件中，我将这些服务器数据加载到选项卡中 - 数组：

ngOnInit() {
  this.tabs = this.bookingService.getAllInitialTabs();
}

它似乎有效，在 PrimeNG TabView 中显示所有选项卡。

但是我如何访问它们以便设置/获取一些值并在执行操作时获取回调？

我尝试过：

vcr = inject(ViewContainerRef);

setFields() {
   const compRef = this.vcr.createComponent(this.tabs[0].component);
   compRef.changeDetectorRef.detectChanges();
   (<BookingOverviewComponent>compRef.instance).maxAmount = 2000;
}

不幸的是，View 没有改变，maxAmount 的旧值保持不变。

有什么想法如何获取这个创建的组件并用数据填充它吗？另外，如何获取有关按钮单击等反应的信息？

Answer 1

您可能需要更改此顺序：

(<BookingOverviewComponent>compRef.instance).maxAmount = 2000;
compRef.changeDetectorRef.detectChanges();