Angular父组件调用子组件方法失效：点击父按钮无法添加子组件元素

看起来你遇到的问题是：父组件通过模板引用调用子组件的addPallet1方法时，虽然pallets数组确实新增了元素，但子组件的视图没有同步更新。这是因为当从父组件上下文触发子组件的状态变更时，Angular的默认变更检测有时候可能没有及时捕获到数组内容的变化——子组件内部点击按钮时，组件自身的事件处理会直接触发变更检测，但跨组件调用方法时，变更检测的触发逻辑可能没有覆盖到子组件的视图更新。

这里有两个可靠的修复方案，你可以根据情况选择：

方案1：手动触发变更检测 #

在子组件中注入ChangeDetectorRef，然后在添加完Pallet后手动通知Angular检测视图变更：

import { Component, ChangeDetectorRef } from "@angular/core";
import { Pallet } from '../pallet.model';

@Component({
 selector: 'app-workspace',
 templateUrl: './workspace.component.html',
 styleUrls: ['./workspace.component.css']
})
export class WorkspaceComponent {
 pallets: Pallet[] = [];

 // 注入ChangeDetectorRef
 constructor(private cdr: ChangeDetectorRef) {}

 addPallet1(){
  let temp = new Pallet();
  temp.palletName = 'Pallet'+(this.pallets.length+1);
  temp.id=(this.pallets.length+1).toString();
  temp.width = "500";
  this.pallets.push(temp);
  console.log(temp);
  
  // 手动触发变更检测
  this.cdr.detectChanges();
 }

 ngOnInit(){}
}

detectChanges()会强制Angular立即检查当前组件及其子组件的视图变更，确保新添加的Pallet元素被渲染出来。

方案2：更新数组引用（更符合Angular变更检测的最佳实践） #

Angular的变更检测对引用类型的变化（比如数组引用改变）非常敏感。与其修改原数组，不如创建一个新的数组来替换原数组：

addPallet1(){
  let temp = new Pallet();
  temp.palletName = 'Pallet'+(this.pallets.length+1);
  temp.id=(this.pallets.length+1).toString();
  temp.width = "500";
  
  // 用扩展运算符创建新数组，替换原数组
  this.pallets = [...this.pallets, temp];
  console.log(temp);
}

这种方式不需要手动触发变更检测，因为数组的引用发生了变化，Angular会自动检测到并更新视图。

如果上面的方案还是没解决问题，你可以检查子组件是否设置了changeDetection: ChangeDetectionStrategy.OnPush——如果是OnPush策略，只有当输入属性变化或组件内部触发事件时，才会触发变更检测。这种情况下，你需要结合方案1手动触发检测，或者通过输入属性传递状态。

内容的提问来源于stack exchange，提问作者Krystian Kupczyński