Выполнить метод после отображения div

Question

У меня есть этот компонент, который имеет «страницу» в основном div, называемую «# results-page», которая отображается только в том случае, если есть результаты для отображения.

Самый простой способ описать, как это работает, просто чтобы показать вам код:

FIND-page.component.ts:

import { Component } from '@angular/core'; 
import { NavbarComponent } from '../shared/navbar.component'; 
import { FindFormComponent } from '../find-page/find-form.component'; 

@Component({ 
    selector: 'find-page', 
    templateUrl: 'app/find-page/find-page.component.html', 
    styleUrls: ['app/find-page/find-page.component.css' ], 
    directives: [ FindFormComponent ] 
}) 
export class FindPageComponent { 
    showResults = false; 

    onResultsRecieved(recieved: boolean) { 
     if (recieved) { 
      this.showResults = true; 
      ScrollToAnchor.goToTargetBottom("#results-page"); 
     }else { 
      this.showResults = false; 
     } 
    } 
} 

находкой-page.component.html:

<div id="find-page"> 
    <find-form (onResultsRecieved)="onResultsRecieved($event)"></find-form> 
</div> 
<div *ngIf="showResults" id="results-page"> 
</div> 

oResultsRecieved() получает триггер события, когда результаты приходят. Затем мы устанавливаем свойство showResults в значение true, что приводит к отображению «# results-page», и Вскоре, пока он отобразится, я хочу прокрутить до конца этого div. Я отлично справляюсь с scrollToAnchor.goToTargetBottom(). Тем не менее, scrollToAnchor.goToTargetBottom() запускается слишком рано (до отображения «# results-page»), чтобы он не прокручивался до нижней части страницы «# results-page».

Как заставить scrollToAnchor.goToTargetBottom() выполнить, только после отображения «# results-page»?

Answer 1

This answer объясняет, что происходит. Я ничего не знаю о чистом решении. Я сделал это взломанное решение, которое работает для моего сценария, когда у меня нет ничего внутри div на время, когда я хочу его скрыть:

Удалите * ngIf и всегда отобразите компонент.

<div id="results-page"> </div>

Внутри компонента, который вы хотите скрыть, добавить привязки стилей, которые делают его не занимают места на экране:

<div id="results" class="text-uppercase" [style.padding]="padding" [style.height]="height"> 

component.ts:

export class ResultsComponent implements AfterViewInit { 
    results: Result[]; 
    noResults: boolean; 
    padding = "0px"; 
    height = "0px"; 

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

this.padding = "10px 0px 50px 0px"; 
this.height = "inherit";