Angular: лучший способ передачи данных между компонентами?

Question

У меня есть интерфейс в корневом каталоге (папка приложения) mydata.ts

export interface mydata{
   Data1: string;
   Data2: string[];
}

, в котором мои app.component.ts имеют значение

import { Component , OnInit } from '@angular/core';
import { ApiService } from "./api.service"
import { mydata } from "./mydata";
import { error } from 'util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
    providers:[ApiService]
})
export class AppComponent implements OnInit{

  title = 'app';

  _dataArray: mydata[];

  constructor(private apiService: ApiService){}

  getData(): void {
    this.apiService.getData().
    subscribe(
       resultArray => this._dataArray =
       resultArray,
       error => console.log("Error :: " + error ))
  }
  ngOnInit(): void{
    this.getData();

  }
}

, которые получают данные из моей службы API в корневой папке api-service.ts

import { Injectable } from '@angular/core';
import {Http,Response} from "@angular/http";
import { Observable } from 'rxjs';

import {mydata} from "./mydata";
import { map, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiService {



  constructor(private http: Http ) {}
 getData(): Observable<mydata[]>{
   //For WebService
  return this.http
  .get('../assets/testdata.json').pipe(
    map(response => {
      return <mydata[]>response.json();
    }),catchError(this.handleError));

  }


 private handleError(error: Response) {
   return Observable.throw(error.statusText);
 }

}

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

Вот содержимое моего app.component.html

<app-databody></app-databody> //child component
<app-datafilters></app-datafilters> //child component
<router-outlet></router-outlet>

Answer 1

В зависимости от того, как вы хотите использовать его как одноэлементную службу для всей службы уровня приложения или компонента, вы можете объявить это либо в поставщиках [servicename] в модуле, либо вы можете объявить его таким же образом в своем компоненте

Просто создайте общую службу для всех компонентов, и если вы хотите обмениваться данными между ними, вы можете объявить их на уровне модуля для доступа к тем же данным или, если вы хотите создать новый экземпляр службы для каждого компонента, вы можете объявитьна уровне компонента

Из вашего кода вы объявляете сервис на уровне модуля, поэтому, если вы импортируете этот сервис в свои компоненты и попытаетесь использовать его внутри них, они будут возвращать те же данные, что и одноэлементный сервис

Answer 2

Можно использовать инъекцию зависимостей, вы можете использовать ее на уровне модуля или на уровне компонента, объявив службу данных в разделе провайдеров.

Например, в компоненте это будет выглядеть так

@Component({
providers: [AService] // < - provided,
  template : `<todos></todos>`
})

export class AComponent {
  constructor(private aservice: AService) {}
}

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

В модуле это примерно то же самое, но есть службастановится видимым во всех объявленных компонентах для этого модуля.