当 parent 有动作时，Angular7 将新数据传递给 child 组件

Question

Parent 包含一个 child 组件和一个按钮

Parent包含字符串颜色：[color]=color

点击按钮时，

数据传递给child并触发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

代码中的逻辑很好，但语法不对：

<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>

Answer 2

this.color=Object.assign({}, this.color); 传递对象时会触发onchange

Angular7 pass new data to child component when parent has action