Ionic6-動態組件加載器中的Viewchildnull

我正在開發一個 Ionic 應用程式，該應用程式將具有一個表單，其中包含從 JSON 資料動態創建的控制元件。

加載-child.directive.ts：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[dynamicChild]'
})
export class DynamicChildLoaderDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

app.module.ts：

...
@NgModule({
  declarations: [AppComponent, DynamicChildLoaderDirective],
...

主頁.html

...
<ion-content [fullscreen]="true" class="ion-padding">
  
    <form [formGroup]="testForm">
      <ion-card *ngFor="let objGrupo of grupos">
        <ion-card-header>
          <ion-card-title>{{objGrupo.label}}</ion-card-title>
        </ion-card-header>
        
        <ion-card-content *ngFor="let objControl of objGrupo.controls">
          <app-dynamic-form [control]="objControl" [form]="testForm"></app-dynamic-form>
        </ion-card-content>    
      </ion-card>
      
    </form>
</ion-content>
...

主頁.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DynamicFormGroup } from '../models/dynamic_form_group';
import { Ticket } from '../models/ticket';
import { TicketService } from '../services/ticket.service';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  grupos: DynamicFormGroup[] = [];
  testControl: any = {};
  testForm: FormGroup;
  validation_messages: any;

  constructor(public formBuilder: FormBuilder,private ticketService: TicketService) {

    this.ticketService.obtenerFormularioTicket()
      .subscribe(obtainedInfo => {
        var ticket: Ticket = obtainedInfo;
        this.grupos = ticket.getFormList();
        this.testControl = this.grupos[0].controls;
      });
  }

}

動態form.component.html：

<ion-label>{{ control.Name }}</ion-label>  

<ng-template dynamicChild></ng-template>

動態form.component.ts：

import { Component, Input, OnInit, Type, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DynamicChildLoaderDirective } from 'src/app/directives/load-child.directive';
import { DnElement } from '../dn-element/dn-element.component';
import { DnInputTextComponent } from '../dn-input-text/dn-input-text.component';
import { DnLabelComponent } from '../dn-label/dn-label.component';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss'],
})
export class DynamicFormComponent implements OnInit {
  @ViewChild(DynamicChildLoaderDirective, { static: true }) dynamicChild!: DynamicChildLoaderDirective;
  @Input() control: any;
  @Input() form: FormGroup;
  componente: Type<any>;  
  
  ngOnInit(): void {
    this.loadDynamicComponent();
  }

  private loadDynamicComponent() {
    if(!this.control.Editable){
      this.componente = DnLabelComponent;
    }else{
      this.componente = DnInputTextComponent;
    }  
    const componentRef = this.dynamicChild.viewContainerRef.createComponent<DnElement>(this.componente);
    componentRef.instance.objControl = this.control;
    componentRef.instance.form = this.form;
  }
}

問題是在運行應用程式時，該行

const componentRef = this.dynamicChild.viewContainerRef.createComponent<DnElement>(this.componente);

回傳以下錯誤：

ERROR Error: Uncaught (in promise): TypeError: this.dynamicChild is undefined

我正在使用以下版本：

離子版本：6.1.5

角度版本：13.3.5

我正在使用官方的角度檔案作為指南：

https://angular.io/guide/dynamic-component-loader

我嘗試將 ViewChild 的靜態屬性更改為 false 并將 ngOnInit 移動到 ngAfterViewInit ，結果相同。

這里有什么遺漏嗎？

提前致謝。

編輯：

我也嘗試過 viewChildren：

export class DynamicFormComponent implements OnInit {
  @ViewChild(DynamicChildLoaderDirective, { static: true }) dynamicChild!: DynamicChildLoaderDirective;
  @ViewChildren(DynamicChildLoaderDirective) viewChildren!: QueryList<DynamicChildLoaderDirective>;
  @Input() control: any;
  @Input() form: FormGroup;
  componente: Type<any>;  
  
  ngOnInit(): void {

    //this.loadDynamicComponent();
  }

  ngAfterViewInit() {
    // viewChildren is set
    this.viewChildren.changes.subscribe((r) => {
      console.log(this.viewChildren);
    });

  }

沒有錯誤出現，但它永遠不會進入訂閱的 console.log 部分。

uj5u.com熱心網友回復：

最后我設法讓它作業。代碼原樣可以，不同之處在于指令的宣告必須在我使用它的頁面中完成。在這種情況下，在home.module.ts而不是 app.module.ts 中：

...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,ReactiveFormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage,DynamicFormComponent,DynamicChildLoaderDirective]
})
...

uj5u.com熱心網友回復：

您應該在頁面完全加載時呼叫模板參考，為此我們在頁面完全加載時觸發了生命周期掛鉤：

ngAfterViewInit(){
    this.loadDynamicComponent();
}

uj5u.com熱心網友回復：

試試這個

ngAfterContentInit(){
  this.loadDynamicComponent();
}

標籤：有角度的 离子框架 视童 角13 离子6

上一篇：useLocationHook回傳錯誤的路徑

下一篇：Angular雙花括號運算式在滑鼠向下和向上執行多次