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
Miglioramenti nell'accessibilità con Angular CDK
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Effettuare delete massive con Entity Framework Core 7
Usare le variabili per personalizzare gli stili CSS
Assegnare un valore di default a un parametro di una lambda in C#
Miglioramenti agli screen reader e al contrasto in Angular
Configurare policy CORS in Azure Container Apps
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Gestire liste di tipi semplici con Entity Framework Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Miglioramenti nelle performance di Angular 16