针对你在Angular薪资累加功能中遇到的问题，我逐一拆解分析：

1. 为何当前代码无法得到预期结果？ #

你的代码出现异常数值主要是3个核心逻辑错误导致的：

• 父组件错误使用@Input()：totalsalary是父组件自己维护的状态，完全不需要标记为@Input()——这个装饰器是用来接收外部组件传入值的，多余的标记不仅没必要，还会造成逻辑混淆。
• 模板方法触发重复变更检测：你在子组件模板里直接调用displayTotalSalary()方法，Angular的变更检测机制会在组件渲染、状态变化等多个时机反复执行这个方法。每次执行都会触发totalSalary.emit(sum)，导致父组件的totalsalary被反复累加。
• 全局累计值引发循环更新：所有子组件共享父组件的同一个totalsalary值。当第一个子组件emit更新后，父组件的totalsalary变化会触发所有子组件重新渲染，每个子组件又会再次调用displayTotalSalary()，再次累加数值，形成了无限循环的变更检测和累加流程，最终数值严重超出预期。

2. 如何正确使用@Output装饰器实现该功能？ #

其实针对「逐个显示累计薪资」的需求，@Output并不是最适合的方案（后面会说更简洁的方式），但如果一定要用@Output实现，可以调整逻辑为：父组件维护累计值，通过逐个初始化子组件并传递当前累计，子组件接收后计算自己的累计并emit给父组件更新，再传递给下一个子组件。示例代码如下：

父组件（app.component.ts） #

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  totalsalary = 0;
  persons = [{ "name":"x", "salary":1 },{ "name":"s", "salary":2 }, { "name":"y", "salary":2 } ];
  
  @ViewChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;

  ngAfterViewInit(): void {
    // 逐个处理子组件，依次传递累计值
    this.childComponents.forEach((child, index) => {
      this.totalsalary += this.persons[index].salary;
      child.updateTotal(this.totalsalary);
    });
  }
}

父组件模板（app.component.html） #

<div *ngFor="let person of persons">
  <app-child [name]="person.name" [salary]="person.salary"></app-child>
</div>

子组件（child.component.ts） #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name!: string;
  @Input() salary!: number;
  currentTotal = 0;

  updateTotal(total: number): void {
    this.currentTotal = total;
  }
}

子组件模板（child.component.html） #

<p>{{name}}</p>
<p>{{salary}}</p>
<p>{{currentTotal}}</p>

3. 除修改数据模型外，是否有其他方法实现该动态薪资累加功能？ #

当然有，这里提供两种更简洁的方案：

方案一：模板中用临时变量计算累计 #

利用Angular模板的变量特性，在*ngFor中直接维护累计值：

<div *ngFor="let person of persons; let i = index">
  <ng-container *ngIf="(i === 0 ? person.salary : (total = total + person.salary)) as total; else init">
  </ng-container>
  <ng-template #init>
    <ng-container *ngIf="(total = person.salary) as total"></ng-container>
  </ng-template>
  <app-child [name]="person.name" [salary]="person.salary" [currentTotal]="total"></app-child>
</div>

子组件只需要接收currentTotal并展示即可，不需要额外逻辑。

方案二：自定义管道计算累计 #

创建一个可复用的管道来计算到当前项的累计值：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'runningTotal'
})
export class RunningTotalPipe implements PipeTransform {
  transform(items: Array<{salary: number}>, index: number): number {
    return items.slice(0, index + 1).reduce((sum, item) => sum + item.salary, 0);
  }
}

然后在模板中使用：

<div *ngFor="let person of persons; let i = index">
  <app-child 
    [name]="person.name" 
    [salary]="person.salary" 
    [currentTotal]="persons | runningTotal: i"
  ></app-child>
</div>

这种方式符合Angular的管道设计理念，逻辑清晰且可复用。

内容的提问来源于stack exchange，提问作者Sree