เว็บเซอร์วิส - Angular: วิธีที่ดีที่สุดในการส่งข้อมูลระหว่างคอมโพเนนต์?

ฉันมีอินเทอร์เฟซใน root (โฟลเดอร์แอป) 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>

คำตอบ #1

วิธีหนึ่งคือการใช้ Dependency Injection คุณสามารถใช้มันในระดับโมดูลหรือระดับคอมโพเนนต์โดยการประกาศ data-service ในส่วน providers

ตัวอย่างเช่น ในคอมโพเนนต์มันจะดูเหมือนแบบนี้

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

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

ถ้าคุณทำแบบนี้ คุณก็สามารถใช้บริการนี้ได้ในทุกคอมโพเนนต์ย่อยของคอมโพเนนต์นี้ด้วย

ในโมดูลนั้น สิ่งนี้ก็เช่นเดียวกัน แต่ที่นั่นบริการจะปรากฏในทุกคอมโพเนนต์ที่ประกาศสำหรับโมดูลนั้น

คำตอบ #2

ขึ้นอยู่กับว่าคุณต้องการใช้งานมันแบบบริการซิงเกิลตันสำหรับทั้งแอปหรือบริการระดับคอมโพเนนต์ คุณสามารถประกาศได้ทั้งใน providers[ชื่อบริการ] ในโมดูลหรือคุณสามารถประกาศในวิธีเดียวกันในคอมโพเนนต์ของคุณ

เพียงสร้าง service ทั่วไปสำหรับทุก component และถ้าคุณต้องการแชร์ข้อมูลระหว่างทั้งสอง คุณสามารถประกาศมันในระดับ module เพื่อเข้าถึงข้อมูลเดียวกัน หรือถ้าคุณต้องการให้มี instance ของ service ใหม่สำหรับแต่ละ component คุณสามารถประกาศมันในระดับ component

จากโค้ดของคุณ คุณกำลังประกาศบริการที่ระดับโมดูล ดังนั้นถ้าคุณนำเข้าบริการนั้นในคอมโพเนนต์ของคุณและพยายามใช้งานภายในนั้น พวกเขาจะส่งคืนข้อมูลเหมือนเดิมเพราะเป็นบริการแบบซิงเกิลตัน