javascript - När anropas Angular2 ngAfterViewInit?

Jag behöver lite jQuery-kod som körs efter att min Angular-komponents vy har initierats för att omvandla siffervärden till stjärnor.

Jag satte koden i ngAfterViewInit-funktionen, men den gör inte det jag behöver att den ska göra. Jag satte en brytpunkt i funktionen och jag ser att största delen av HTML för min komponent inte ens har laddats när ngAfterViewInit-funktionen kallas. De delar som inte har laddats genereras med hjälp av *ngFor-direktivet.

Hur kan jag få min kod att köras efter att denna direktiv har genererat all HTML som jag behöver arbeta med?

Svar #1

Jag har använt ngAfterViewChecked när jag är beroende av att DOM är redo.

import {Component, AfterViewChecked} from '@angular/core'; 

export class Spreadsheet implements AfterViewChecked{

   ngAfterViewChecked(){

   }
}

Svar #2

När kallas ngAfterViewInit?

ngAfterViewInit() bör anropas efter att en komponents vy, och dess barns vyer, har skapats. Jag testade detta och upptäckte att barnens ngAfterViewInit() anropas innan förälderns ngAfterViewInit().

När du säger "det mesta av HTML:en för min komponent har inte ens laddats", vad menar du med "laddats"? Är HTML:en i barnkomponentens mall, eller laddas den (eller genereras) på något annat sätt?

Hur kan jag få min kod att köras efter att denna direktiv har genererat all HTML som jag behöver arbeta med?

Det skulle hjälpa att se direktivkoden. Om direktivet på något sätt genererar HTML som inte är innehållen i Angular-mallar, kan du behöva manuellt trigga en händelse (t.ex. genom att använda en output-egenskap) för att meddela föräldern när renderingen är klar. Eller så kan du använda setTimeout() (men det skulle inte vara pålitligt).

Jag behöver lite jQuery-kod som körs efter att min Angular-komponents vy har initierats för att omvandla siffervärden till stjärnor.

Var får du dessa siffervärden ifrån? Om de laddas dynamiskt från en server, kan du trigga en händelse när datan anländer och uppdatera vyn vid det tillfället.

Varför inte också skriva en komponent som tar ett nummer som en inmatningsegenskap och genererar stjärnor med hjälp av NgFor?

Relaterade artiklar