角度等待直到綁定完成

Question

為了在視圖初始化完成后滾動到列表的元素，我嘗試獲取將通過HTTP調用后由“ * ngFor ”放入DOM的元素的getElementById ，

但是getElementById始終返回null，直到我用3sec的setTimeout包圍它為止，因此它返回元素。

因此，我正在尋找一種干凈的解決方案，以等待與視圖的綁定完成之后再創建getElementById。

component.ts：

  InitDisponibilites(disponibilites) {
    this.disponibilites = Array();
    for (let disponibilite of disponibilites) {
      this.addDisponibilite(disponibilite);
    }

    setTimeout(()=>{

      let index = this.getElementIndexToScroll();
      let el = document.getElementById('dispo' + index) as HTMLElement;
      el.scrollIntoView();

    },3000);

  }

Answer 1

您可以將該代碼移動到ionViewDidEnter或ionViewWillEnter方法中，這些事件基於離子生命周期進行調用。 您可以選擇二者之一，具體取決於您希望滾動效果多久。

在此處找到有關離子生命周期事件的更多信息

如果用例位於頁面的子組件中，則不能直接使用離子生命周期事件，而要使用@ViewChild訪問要通過頁面事件調用的組件方法。

@ViewChild(childComponent) childComponent: ChildComponent;
----------------------
----bunch of code ----
----------------------
ionViewWillEnter() {
    this.childComponent.willEnter(); //scroll logic will go inside the willEnter method.
}

更新
如果要填充子組件作為對http的響應，則可以嘗試使用與組件ngAfterViewInit()關聯的角度生命周期事件，然后檢查給定的組件索引是否為所需的索引，將其滾動到視圖中。

childcomponent.html

<div #rootDiv [selected]="index === getElementIndexToScroll()"></div>

childcomponent.ts

export class ChildComponent implements AfterViewInit {
   @ViewChild('rootDiv') rootElement: ElementRef;
   @Input() selected: boolean;

  ngAfterViewInit() {
    if (this.selected) {
       this.rootElement.nativeElement.scrollIntoView();
    }
}