@HostBinding
può essere una fonte confusa di questo errore.
Ad esempio, supponiamo che tu abbia il seguente binding host in un componente
// image-carousel.component.ts
@HostBinding('style.background')
style_groupBG: string;
Per semplicità, supponiamo che questa proprietà sia aggiornata tramite la seguente proprietà di input:
@Input('carouselConfig')
public set carouselConfig(carouselConfig: string)
{
this.style_groupBG = carouselConfig.bgColor;
}
Nel componente genitore lo stai programmando ngAfterViewInit
@ViewChild(ImageCarousel) carousel: ImageCarousel;
ngAfterViewInit()
{
this.carousel.carouselConfig = { bgColor: 'red' };
}
Ecco cosa succede:
- Il componente principale è stato creato
- Il componente ImageCarousel viene creato e assegnato a
carousel
(tramite ViewChild)
- Non possiamo accedere
carousel
fino a ngAfterViewInit()
(sarà nullo)
- Assegniamo la configurazione, che imposta
style_groupBG = 'red'
- Questo a sua volta imposta
background: red
sul componente host ImageCarousel
- Questo componente è "di proprietà" del componente principale, quindi quando verifica la presenza di modifiche trova una modifica
carousel.style.background
e non è abbastanza intelligente da sapere che questo non è un problema, quindi genera l'eccezione.
Una soluzione è quella di introdurre un altro wrapper div insider ImageCarousel e impostare il colore di sfondo su quello, ma poi non si ottengono alcuni dei vantaggi dell'utilizzo HostBinding
(come consentire al genitore di controllare i limiti completi dell'oggetto).
La soluzione migliore, nel componente padre è aggiungere detectChanges () dopo aver impostato la configurazione.
ngAfterViewInit()
{
this.carousel.carouselConfig = { ... };
this.cdr.detectChanges();
}
Questo può sembrare abbastanza ovvio come questo, e molto simile ad altre risposte, ma c'è una sottile differenza.
Considera il caso in cui non lo aggiungi @HostBinding
più tardi durante lo sviluppo. Improvvisamente si ottiene questo errore e non sembra avere alcun senso.