Передача массива между дочерними компонентами Angular /TypeScript

#angular #typescript #angular-components

#angular #typescript #angular-компоненты

Вопрос:

Я пытаюсь передать массив из одного дочернего компонента в другой. Я пытался следовать некоторым онлайн-руководствам для обмена данными со службой, но, похоже, это не работает для меня и приводит к тому, что моя страница ничего не загружает.

Что нарушало мою программу, так это добавление службы данных в конструктор:

 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);
  }

}

1. Можете ли вы указать, как приложение было сломано при добавлении DataService (какое сообщение об ошибке и / или поведение)? Как вы используете этот DataService в BodyComponent?

2. таким образом, в основном на экран ничего не загружается, и если я просматриваю страницу, появляются разделы <app-header> и <app-body>, но внутри них ничего нет. Мне также не хватает моего <нижнего колонтитула приложения>

3. служба данных будет использоваться для добавления фильмов в список или удаления из списка.

Ответ №1:

В angular именно служба управляет данными. Вы должны поместить films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}]; свой сервис и получить к нему доступ в свой компонент, выполнив в конструкторе или ngOnInit:

 this.films = this.data.films;

Другое дело: вы должны назвать (в своем компоненте) свой сервис DataService вместо justdata .

Ответ №2:

Похоже, вы забыли добавить, где предоставляется ваша услуга:

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

Это должно исправить ваши ошибки.

Ответ №3:

если вы пытаетесь передать массив данных между 2 дочерними компонентами, вероятно, лучше всего создать 2 дочерних элемента в вашем родительском элементе и передать данные родительскому элементу через EventEmitter и обратно другому дочернему элементу.