在子組件之間傳遞數組 Angular/TypeScript

Question

我正在嘗試將一個數組從一個子組件傳遞到另一個子組件。 我嘗試按照一些在線教程與服務共享數據，但這似乎對我不起作用，導致我的頁面無法加載任何內容。

破壞我的程序的是將 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) { }
}

數據.服務.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);
  }

}

Answer 1

在 angular 中，管理數據的是服務。 你應該把films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}]; 在您的服務中，並通過在構造函數或 ngOnInit 中執行以下操作在您的組件中訪問它：

this.films = this.data.films;

另一件事：你應該命名（在你的組件中）你的服務 dataService 而不是 justdata。

Answer 2

您似乎忘記添加提供服務的位置：

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

那應該可以解決您的錯誤。

Answer 3

如果您嘗試在 2 個子組件之間傳遞一組數據，最好在您的父組件中創建 2 個 ViewChild，然后通過 EventEmitter 將數據向上傳遞給父組件，然后返回給另一個子組件。