在子组件Angular / TypeScript之间传递数组答案

【问题标题】：Pass Array Between Child Components Angular/TypeScript在子组件Angular / TypeScript之间传递数组
【发布时间】：2021-04-02 08:53:08
【问题描述】：

我正在尝试将一个数组从一个子组件传递到另一个子组件。我尝试按照一些在线教程与服务共享数据，但这似乎对我不起作用，并导致我的页面无法加载任何内容。

破坏我的程序的是将 DataService 添加到构造函数中：

import { DataService } from '../data.service';

export class BodyComponent implements OnInit{
  films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}];
  constructor(private http: HttpClient, private data: DataService) { }
}

data.service.ts

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

@Injectable()
export class DataService {

  private finalNoms = new BehaviorSubject<any>([]);
  currentNoms = this.finalNoms.asObservable();

  constructor() { }

  changeNominations(nom: Object){
    this.finalNoms.next(nom);
  }

}

【问题讨论】：

您能否指出添加 dataService 时应用程序是如何损坏的（什么错误消息和/或行为）？你是如何在 BodyComponent 中使用这个 dataService 的？
所以屏幕上基本上不会加载任何内容，如果我检查页面，会出现和部分，但其中没有任何内容。我也想念我的
dataService 的使用是将电影添加到列表中，或者从列表中删除。

标签： angular typescript angular-components

【解决方案1】：

在 Angular 中，管理数据的是服务。您应该将 films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}]; 放在您的服务中，并通过在构造函数或 ngOnInit 中访问它在您的组件中：

this.films = this.data.films;

其他事情：您应该（在您的组件中）命名您的服务 dataService 而不是 justdata。

【讨论】：

【解决方案2】：

如果您尝试在 2 个子组件之间传递数据数组，最好在父组件中创建 2 个 ViewChild，然后通过 EventEmitter 将数据向上传递给父组件，然后再传回给另一个子组件。

【讨论】：

【解决方案3】：

您似乎忘记添加提供服务的位置：

@Injectable({
  providedIn: 'root',
})

这应该可以解决您的错误。

【讨论】：

这解决了无法加载的问题，谢谢！