Как получить элемент с условием модального диалога в Angular 2?

Question

Я использую ng2-modal для создания модального диалога в Angular 2. Я не могу получить элемент, на котором есть условие (#myModalScrollPanel).

шаблона (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; 

После пользователей нажимает кнопку , Я показываю модальный текст и получаю текст журнала с сервера, я вызываю updateScrollPosition() после обновления logOutput (modal.component.ts):

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; 

Заранее благодарен!

Answer 1

Так, чтобы ответить на мой собственный вопрос, я должен был использовать @ViewChildren вместо @ViewChild. @ViewChildren аннотацию назначит QueryList объект переменной, что дает вам доступ к элементам вам требуется (я использую .toArray(), чтобы получить массив элементов, который в этом случае будет только один) ,

Говоря об обнаружении изменения проблемы, я получил, спасибо this ответ, используя метод ngAfterViewChecked(), я смог реализовать прокрутку вниз, в которой я нуждался.