Angular中如何从app.component向home.component的数组推送数据？

实现可行性结论 #

完全可以实现，push未生效的核心原因通常是两个组件未持有同一个数组的引用，或Angular变更检测未触发视图更新，并非功能本身无法实现。

常见实现方案 #

方案1：@Input()输入绑定（仅适用于父子组件关系） #

如果home.component是app.component的直接子组件，直接通过输入属性绑定同一个数组即可：

1. 在app.component.ts中定义数组：

export class AppComponent {
  public sharedDataArr: any[] = [];
  // 推送数据的方法
  pushToArr(item: any) {
    // 写法1：直接操作原引用
    this.sharedDataArr.push(item);
    // 写法2：生成新引用触发变更检测（解决视图不更新问题）
    // this.sharedDataArr = [...this.sharedDataArr, item];
  }
}

2. 在app.component.html中绑定输入属性：

<app-home [componentArr]="sharedDataArr"></app-home>

3. 在home.component.ts中接收输入属性：

import { Input } from '@angular/core';
export class HomeComponent {
  @Input() componentArr: any[] = [];
}

方案2：共享服务（适用于任意层级、任意关系的组件） #

非父子关系的组件推荐用全局单例服务共享数据，是最通用的解决方案：

1. 新建共享服务data-shared.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataSharedService {
  // 普通数组实现
  public sharedArr: any[] = [];
  addItem(item: any) {
    this.sharedArr.push(item);
  }

  // 响应式实现（自动触发视图更新，推荐）
  private arrSubject = new BehaviorSubject<any[]>([]);
  public sharedArr$ = this.arrSubject.asObservable();
  addItemReactive(item: any) {
    const currentArr = this.arrSubject.value;
    this.arrSubject.next([...currentArr, item]);
  }
}

2. 在两个组件中都注入服务：

// app.component.ts和home.component.ts都加这段
constructor(private dataSharedService: DataSharedService) {}

3. 推送数据：在app.component中调用服务方法this.dataSharedService.addItemReactive(你的数据)
4. 读取数据：在home.component中直接订阅可观察对象，配合async管道自动处理订阅和视图更新：

<!-- home.component.html -->
<div *ngFor="let item of dataSharedService.sharedArr$ | async">
  {{ item }}
</div>

常见问题排查 #

如果操作后视图未更新，优先排查：

• 是否两个组件拿到的是同一个数组引用，有没有重新赋值生成新数组导致引用断开
• 是否用了OnPush变更检测策略，此时需要主动触发变更检测，或者用响应式方案+async管道自动处理

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