javascript - Alternativ till setTimeout i Angular 2+

Jag skickar data till ngrx-butik. Efter det vill jag scrolla till en specifik div som använder denna data från butiken.

@ViewChild('datalist') private myScrollContainer: ElementRef; 

this.store.dispatch(new SetClientSearchResultsAction(filteredData));

setTimeout(() => {
this.myScrollContainer.nativeElement.scrollIntoView({ behavior:'smooth', block: 'start'});
 }, 300);

Nedan är HTML-diven.

<div  #datalist id="mydata" *ngIf="clientSearchResults$ | async  as searchResults" 
class = 'result'>
  <p> hellooo</p>
</div>

Jag får scrollen till min div efter att ha skickat datan till lagret. Men jag vill inte använda setTimeout. Det väntar onödigt i 300 millisekunder. Finns det något alternativt sätt att göra det på? Jag vill bara scrolla till min div när min data har skickats eller ngif-villkoret uppfylls.

Nedan är konstruktören för min komponent där jag hämtar värdet från Store.

constructor(private store: Store<AppState>,
    private formBuilder: FormBuilder, private _clientService: ClientService) {
    this.clientSearchResults$ = this.store.select('searchResults');
  }

Svar #1

Du kan använda livscykelhake, AfterViewInit Svara efter att Angular har initialiserat komponentens vyer och barnvyer/den vy som en direktiv finns i.

class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}

Svar #2

Det finns flera sätt med RXJS

Alternativ 1 - med asapScheduler

asapScheduler.schedule(() => { // Your Code });

Länk

Alternativ 2 - med intervall

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

  interval(0).pipe(take(1),
   ).subscribe(value => { // Your Code });

Länk

Alternativ 3 - Med Promise

Promise.resolve().then(() => { // Your Code });

Det optimala sättet är med Alternativ 1 eftersom det är gjort för att undvika setTimeout(deferredTask, 0)

Från RxJS-dokumentationen för asapScheduler:

ASAP-schemaläggaren kommer att göra sitt bästa för att minimera tiden mellan slutet på den för närvarande exekverande koden och starten på den schemalagda uppgiften. Detta gör den till den bästa kandidaten för att utföra så kallad "fördröjning". Traditionellt uppnåddes detta genom att anropa setTimeout(deferredTask, 0), men den tekniken innebär viss (även om minimal) oönskad fördröjning.

Relaterade artiklar