我在 Angular 中有一个动态组件，它不会导入任何模块，例如 Common 和 Forms 模块

Question

我有一个使用动态组件来显示子组件的组件：

在父组件中，子组件是这样声明的

  @ViewChild('lscRef', { read: ViewContainerRef, static: false }) // Set static: false to ensure availability after view initialization
  lscRef!: ViewContainerRef;

模板如下：

<p-dialog [(visible)]="preview" header="Track Preview">
    <ng-template pTemplate="message" let-message>
        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
            <div>
                <ng-template #lscRef></ng-template>
            </div> 
              <p-button (click)="next()" [disabled]="currentIndex === track.length - 1">Next</p-button>
        </div>
    </ng-template>
</p-dialog>

加载组件代码如下：

loadComponent(): void {
    if (!this.lscRef) return; // Ensure lscRef is available before proceeding

    const item = this.track[this.currentIndex];
    console.log(item)

    this.lscRef.clear();

    const component = this.componentMap[item.type];
    console.log(component)

    if (component) {
      const componentRef = this.lscRef.createComponent(component); // Use 'component' here
      componentRef.changeDetectorRef.detectChanges();
      if (componentRef.instance && item.data) {
        console.log(componentRef.instance)
        const deepCopiedData = structuredClone ? structuredClone(item.data) : JSON.parse(JSON.stringify(item.data));

        console.log('Assigning deep-copied data:', deepCopiedData);
  
        componentRef.instance.data = deepCopiedData;      }
    }
  }

我得到的错误是：

1. 无法绑定到“ngIf”，因为它不是“div”的已知属性[重复] 即使 CommonModule 已导入。

2. 无法绑定到 ngModel，因为它不是输入错误的已知属性 即使 FormsModule 已导入。

Answer 1

我发现你不能延迟加载动态组件。有了正常的组件，它就开始工作了。问题是为该组件创建一个单独的模块。将子组件添加到父模块中。现在，它正在按预期工作。