在两个组件之间传递数据和计算

Question

当我将数据从一个组件传递到另一个组件时，我想知道什么是最有效和最简洁的方法。流动情况如下：

我有两个组件在一个主页的角度，如下：

   <component-1 (addItem)="addItem($event)"></component-1>
   <component-2 [items]="item"></component-2>

在我的家庭组件中，我只做了：

addItem (item: any) {
    this.items.push(item);
}

然后将项目作为输入传递给第二个组件。但是，同时，我需要计算和显示第二个组件中的总项数(items.lenght) (让totalItems = this.items.lenght；)

我尝试过使用ngOnChanges() --它不能工作，ngDoCheck()可以工作，但我不确定它有多高的效率和性能。正如我所看到的，这个生命周期经常被执行。

基本上，每次更改项输入时，都需要计算组件-2中的总数。

Answer 1

只需将长度作为@输入传递即可

模板

<component-1 (addItem)="addItem($event)"></component-1>
<component-2 [items]="item" [total]="items.length"></component-2>

构成部分2

@Input() total: number;

Answer 2

它不会自动更新，因为在使用this.items方法推送新项时，对push的引用不会更改。相反，您可以尝试使用非结构化赋值语法更改引用。尝试以下几点

addItem (item: any) {
  this.items = [...this.items, item];
}

现在，在'component-2‘中不再需要ngOnChanges()或ngDoCheck()了。