Angular7 передает новые данные дочернему компоненту, когда у родителя есть действие

Question

Родитель содержит дочерний компонент и кнопку

Родитель содержит строку цвета: [color]=color

при нажатии на кнопку

данные передаются впотомок и триггер ngOnChanges

parent.html

<button (click)=>'changeColor()'>Change Color </button>
<app-child [color]=color></app-child>

parent.ts

color = {color: 'blue'}
changeColor(){
  this.color.color = 'red'
}

child.ts

@Input() public color: string;
ngOnChanges() {
  console.log('onchange')
}

child. html

<div>color.color</div>

ngOnChanges не запускается, но html реагирует на изменение

Answer 1

this.color = Object.assign ({}, this.color);активирует обмен при прохождении объекта

Answer 2

Логика в коде хорошая, но синтаксис отключен:

<button (click)=>'changeColor()' />
<app-child [color]=color></app-child>

должно быть:

<button (click)='changeColor()'>Click me</button>
<app-child [color]='color'></app-child>

Обратите внимание, в первой строке я удалил > иво второй я добавил цитаты. Я также добавил закрывающий тег в первой строке, так как текст между тегами является текстом кнопки.

Кроме того, в вашем дочернем компоненте copde отсутствует интерполяция:

<div>{{color}}</div>

Проверьте эту страницу: https://angular.io/guide/template-syntax