Fino alla versione 7 di Angular, i decorator ViewChild e ContentChild impostano la variabile che decorano a partire dal metodo ngAfterViewInit della pipeline di esecuzione del component. Questo esempio mostra questo funzionamento.
<h1 #MyDiv>mydiv</h1>
@ViewChild('MyDiv') myDiv: ElementRef<HTMLDivElement>; ngOnInit() { console.log(this.myDiv); // ritorna undefined } ngAfterViewInit() { console.log(this.myDiv); // ritorna div }
A partire da Angular 8, se il tag non è contenuto all'interno di un template con una direttiva strutturale come ngIf e ngFor, allora la variabile decorata è disponibile già nei metodi che vengono eseguiti prima di ngAfterViewInit come mostrato in questo esempio.
ngOnInit() { console.log(this.myDiv); // ritorna div } ngAfterViewInit() { console.log(this.myDiv); // ritorna div }
Se vogliamo mantenere il comportamento precedente ad Angular 8, dobbiamo inserire un secondo parametro nei decorator ViewChild e ContentChild. Questo parametro deve essere un oggetto con la proprietà static impostata a true.
@ViewChild('MyDiv', { static: true }) myDiv: ElementRef<HTMLDivElement>;
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Disabilitare automaticamente un workflow di GitHub
Le novità di Angular: i miglioramenti alla CLI
Evitare la script injection nelle GitHub Actions
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
C# 12: Cosa c'è di nuovo e interessante
Eseguire le GitHub Actions offline
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Miglioramenti agli screen reader e al contrasto in Angular
Ricevere avvisi su metriche dei server Azure Arc
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati