Элемент Dom не найден в компоненте angular с ленивой загрузкой

У меня есть компонент небулярного степпера, и на последнем этапе я лениво загружаю компонент. В этом компоненте мне нужно идентифицировать элемент по id и внести в него изменения.

Шаговый компонент, в котором происходит ленивая загрузка:

HTML-

 <nb-step [label]="labelFour">
          <ng-template #labelFour>Fourth step</ng-template>
          <h3>Edit Your Image</h3>
          
          <div class="container step-container">
              <ng-template #canvasContainer ></ng-template>
              
            
          </div>


          <button nbButton nbStepperPrevious>prev</button>
          <button nbButton nbStepperNext>next</button>
</nb-step>

TS-

  @ViewChild('canvasContainer', {read: ViewContainerRef}) canvasContainer: ViewContainerRef;
  canvasInitialized = false;

  async createCanvas() {
    await this.lazyLoadCanvas();
    this.canvasInitialized = true;
    
  }
  private async lazyLoadCanvas() {
    const {CanvasComponent} = await import('../../single/canvas/canvas.component');

    const canvasFactory = this.cfr.resolveComponentFactory(CanvasComponent);
    const {instance} = this.canvasContainer.createComponent(canvasFactory, null, this.injector);
    

  }
  noDesignSelected:boolean;
  thirdStepNext(){           //Third step is clicked
   
    if(this.postDesignService.designID != -1){
      this.stepper.next();
      this.noDesignSelected = false;
      this.createCanvas();
    } else {
      this.noDesignSelected = true;
    }
    
  }

Компонент, который загружен в-

HTML-

<div class="canvas-bg">
    <div id="container" ></div>
</div>

TS-

ngAfterViewChecked() {
    document.getElementById('container').classList.add('test');   //error here

    this.stage = new Konva.Stage({
      container: 'container',            //error here
      width: this.stageWidth,
      height: this.stageHeight,
    });
}

Ошибка говорит мне, что элемент с идентификатором «контейнер» не может быть найден.

Я пробовал ngOninit, ngAfterViewInit и ngAfterViewChecked (как показано выше). Я попытался назначить элемент Viewchild и изменить стиль этого viewchild.


typescript angular lazy-loading nebular
person Chano    schedule 10.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте использовать Viewchild, указав #ref вместо идентификатора.

Что-то вроде

<div class="canvas-bg">
    <div *#ref* id="container" ></div>
</div>

В вашем ts-файле:

@ViewChild("ref") ref;

Затем вызовите внутри ngAfterViewInit, например this.ref.nativeElement.textContent

person ランス    schedule 10.12.2020
comment
Спасибо за ответ. К сожалению, я получаю ту же ошибку. Я считаю, что это что-то странное в том, как Nebular обрабатывает свой степпер-контент, из-за чего afterviewchecked запускается до того, как появится контейнер. - person Chano; 12.12.2020