Angular 4:如何从另一个组件更新另一个组件中数组的值

在Angular 4中，可以通过使用服务（Service）来实现从一个组件更新另一个组件中数组的值。以下是一种可能的实现方式：

创建一个共享数据的服务（Shared Data Service），可以命名为DataSharingService。
在DataSharingService中定义一个数组属性，用于存储要共享的数据。例如，可以定义一个名为sharedArray的数组属性。
在需要更新数组的组件中，将DataSharingService注入（Inject）进来，并通过调用DataSharingService的方法来更新数组的值。例如，可以定义一个名为updateArray的方法，接收一个新的数组作为参数，并将其赋值给sharedArray属性。
在需要获取更新后的数组的组件中，同样将DataSharingService注入进来，并通过调用DataSharingService的方法来获取更新后的数组的值。例如，可以定义一个名为getArray的方法，直接返回sharedArray属性的值。

下面是一个示例代码：

// data-sharing.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataSharingService {
  sharedArray: any[] = [];

  constructor() { }

  updateArray(newArray: any[]): void {
    this.sharedArray = newArray;
  }

  getArray(): any[] {
    return this.sharedArray;
  }
}

// component1.component.ts

import { Component } from '@angular/core';
import { DataSharingService } from '路径/data-sharing.service';

@Component({
  selector: 'app-component1',
  template: `
    <button (click)="updateArray()">更新数组</button>
  `
})
export class Component1Component {
  constructor(private dataSharingService: DataSharingService) { }

  updateArray(): void {
    const newArray = [1, 2, 3, 4, 5];
    this.dataSharingService.updateArray(newArray);
  }
}

// component2.component.ts

import { Component } from '@angular/core';
import { DataSharingService } from '路径/data-sharing.service';

@Component({
  selector: 'app-component2',
  template: `
    <div>{{ array }}</div>
  `
})
export class Component2Component {
  array: any[];

  constructor(private dataSharingService: DataSharingService) { }

  ngOnInit(): void {
    this.array = this.dataSharingService.getArray();
  }
}

在上述示例中，DataSharingService被注入到了Component1Component和Component2Component中。当点击Component1Component中的按钮时，会调用DataSharingService的updateArray方法来更新数组的值。Component2Component在初始化时通过调用DataSharingService的getArray方法来获取更新后的数组的值，并将其显示在模板中。

这样，当Component1Component更新数组的值后，Component2Component会自动获取到更新后的数组，并进行相应的显示。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云对象存储（COS）产品介绍链接地址：https://cloud.tencent.com/product/cos