Question

我有一个数组：

const a = [apple,ball,cat]

我将此传递给两个组件：

<app-header [appData]="data"  ></app-header>

<list-todo [appData]="data" [getData]="getData" [setData]="setData" ></list-todo>

在appHeader组件中，

export class appHeader  {
  @Input('appData') data : any

  clear(){
    this.data = []
  }
}

执行clear()函数不会影响listTodo组件中的数组。有没有办法解决这个问题？

我还检查了双向绑定属性，但没有任何工作了！

Answer 1

Input绑定以单向方式向子组件发送数据，因此当我们修改子组件数据时，它不会向上流动。由于您要将新的空白数组分配给子组件中的this.appData（它不会向上流动）。在这种情况下，您可以考虑将appData属性绑定更改为双向绑定。因此，子组件中的任何更新都将更新父组件中的相对属性，但是它并不是神奇地发生。您必须手动更新数据;）

为了使同样的事情发挥作用，你必须通过像changed之类的component绑定将Output对象的副本发送到父[(appData)]="data"（它使用EventEmitter将数据发送到父母组织）。

AppComponent模板

 <app-header [appData]="data"  ></app-header>
<list-todo [(appData)]="data"></list-todo>

ListTodoComponent

@Component({
  selector: 'list-todo',
  template: `
     <ul>
      <li *ngFor="let item of appData">{{item}}</li>
     </ul>
     <button (click)="clear()">Clear</button>
  `
})
export class ListTodoComponent { 
  @Input() appData;
  @Output() appDataChange: EventEmitter<any> = new EventEmitter<any>();

  clear(){
    this.appData = [];
    //this emit is important to send data back to parent.
    //make sure you should have `Change` prefix to bounded value, like `appData` + `Change` = `appDataChange`, 
    //which ultimately saves few lines of code.
    this.appDataChange.emit(this.appData); 
  }
}

Demo Here

Answer 2

通过执行this.data = []，您不会清空阵列，而是将其替换为新实例。您的父组件和另一个子组件仍然引用原始实例，这会导致您描述的行为。

一种解决方案是清空原始数组而不是替换它：

clear() {
    this.data.length = 0;
}

这样，所有组件将继续引用相同的数组实例，并且其状态将被正确反映。

Angular 4组件双向绑定问题

2 个答案: