@HostBinding
pode ser uma fonte confusa desse erro.
Por exemplo, digamos que você tenha a seguinte ligação de host em um componente
// image-carousel.component.ts
@HostBinding('style.background')
style_groupBG: string;
Para simplificar, digamos que essa propriedade seja atualizada através da seguinte propriedade de entrada:
@Input('carouselConfig')
public set carouselConfig(carouselConfig: string)
{
this.style_groupBG = carouselConfig.bgColor;
}
No componente pai, você o está definindo programaticamente ngAfterViewInit
@ViewChild(ImageCarousel) carousel: ImageCarousel;
ngAfterViewInit()
{
this.carousel.carouselConfig = { bgColor: 'red' };
}
Aqui está o que acontece:
- Seu componente pai é criado
- O componente ImageCarousel é criado e atribuído a
carousel
(via ViewChild)
- Não podemos acessar
carousel
até ngAfterViewInit()
(será nulo)
- Atribuímos a configuração, que define
style_groupBG = 'red'
- Isso, por sua vez, define
background: red
o componente ImageCarousel do host
- Esse componente é 'de propriedade' do seu componente pai; portanto, quando ele verifica alterações, encontra uma alteração
carousel.style.background
e não é inteligente o suficiente para saber que isso não é um problema, e lança a exceção.
Uma solução é introduzir outro ImageCarousel, um div de wrapper, e definir a cor do plano de fundo, mas você não obtém alguns dos benefícios de usar HostBinding
(como permitir que o pai controle os limites completos do objeto).
A melhor solução, no componente pai, é adicionar detectChanges () depois de definir a configuração.
ngAfterViewInit()
{
this.carousel.carouselConfig = { ... };
this.cdr.detectChanges();
}
Isso pode parecer bastante óbvio assim, e muito semelhante a outras respostas, mas há uma diferença sutil.
Considere o caso em que você não adiciona @HostBinding
até mais tarde durante o desenvolvimento. De repente, você recebe esse erro e parece não fazer sentido.