如何在Angular 2中獲得具有模態對話條件的元素？

我正在使用ng2-modal在Angular 2中創建一個模態對話框。我無法獲取一個有條件的元素（#myModalScrollPanel）。如何在Angular 2中獲得具有模態對話條件的元素？

模板（modal.html）：

<modal #myModal title="{{title}}" 
    cancelButtonLabel="Close" 
    submitButtonLabel="Ok" 
    modalClass="@modal-md" 
    [hideCloseButton]="false" 
    [closeOnEscape]="false" 
    [closeOnOutsideClick]="false" 
> 
<modal-header></modal-header> 
    <modal-content> 
    <div class="row"> 
     <div *ngIf="logOutput" class="col-md-12"> 
     <div id="myModalScrollPanel" #myModalScrollPanel class="panel-body fixed-panel"> 
      <p *ngFor="let entry of logOutput.entries">{{entry.log}}</p> 
     </div> 
     </div> 
    </div> 
    </modal-content> 
    <modal-footer></modal-footer> 
</modal>

在我的部分，我得到查看兒童（modal.component.ts）：

@ViewChild('myModal') myModalModal; 
@ViewChild('myModalScrollPanel') myModalScrollPanel;

一個用戶後，點擊一個按鈕，我顯示模式並從服務器獲取日誌文本，我在更新logOutput（modal.component.ts）後調用updateScrollPosition（）：

updateScrollPosition() { 
    console.log("modal:"); 
    console.log(this.myModalModal); 
    console.log("log scroll panel:"); 
    console.log(this.myModalScrollPanel); 

    if(this.myModalScrollPanel){ 
    console.log("Scrolling the panel down"); 
    this.myModalScrollPanel.nativeElement.scrollTop = this.myModalScrollPanel.nativeElement.scrollHeight; 
    } else { 
    console.log("No log scroll panel."); 
    } 
}

控制檯示出了用於「模態」和「未定義」日誌滾動面板有效的對象。我也嘗試從ngAfterViewInit（）調用該方法，但它只在父組件被加載時被調用，而不是實際的模態被顯示，因此if語句導致false並且元素不存在。如果我刪除/移動if語句，以便元素存在，則可以訪問該對象，但是我所做的更改不會產生任何效果，儘管這可能是一個完全不同的問題（最有可能用於更改檢測）。

最後，我只想滾動到面板的底部。像這樣的東西（在瀏覽器控制檯中工作）：

var scrollPanel = document.getElementById('myModalScrollPanel');  
scrollPanel.scrollTop = scrollPanel.scrollHeight;

在此先感謝！

來源

2016-11-15 Herberts Markūns

因此，要回答我的問題，我不得不使用@ViewChildren的代替@ViewChild。 @ViewChildren註釋會QueryList對象分配給您的變量，讓您獲得您所需要的內容（我用.toArray（）獲得元素的數組，在這種情況下，將只有一個）。

說到變更檢測問題，我得到了this回答，使用ngAfterViewChecked（）方法我可以實現我需要的向下滾動。

來源

2016-11-25 10:20:20

如何在Angular 2中獲得具有模態對話條件的元素？

回答

相關問題