Angular 角度：在组件之间传递数据的最佳方式？

我在根目录（应用文件夹）中有一个接口mydata.ts

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

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.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();

  }
}

从根文件夹中的my API service获取数据API service.ts

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

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

}

从'@angular/core'导入{Injectable}；
从“@angular/Http”导入{Http，Response}；
从“rxjs”导入{Observable}；
从“/mydata”导入{mydata}；
从“rxjs/operators”导入{map，catchError}；
@注射的({
providedIn:'根'
})
出口级服务{
构造函数（私有http:http）{}
getData（）：可观察{
//用于Web服务
返回此文件。http
.get（'../assets/testdata.json'）.pipe(
映射（响应=>{
返回response.json（）；
})，catchError（this.handleError））；
}
私有句柄错误（错误：响应）{
返回Observable.throw（error.statusText）；
}
}

我有一些子组件，我也想使用这些数据。当我有多个组件要使用数据时，共享数据的最佳方法是什么

以下是我的app.component.html的内容

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

//子组件
//子组件

一种方法是使用依赖项注入，您可以在模块级或组件级通过在提供者部分声明数据服务来使用它

例如，在一个组件中，它看起来是这样的

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

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

@组件({
提供者：[A服务]/<-提供，
模板：``
})
导出类组件{
构造函数（私有aservice:aservice）{}
}

如果这样做，还可以在该组件的所有子组件中使用该服务

---

在一个模块中，这大致相同，但在该模块的所有已声明组件中，该服务变得可见。

取决于您希望如何将其作为整个应用程序的单一服务或组件级服务使用，您可以在提供程序[servicename]中声明也可以在组件中以相同的方式声明它

只需为所有组件创建一个公共服务，如果您想在这两个组件之间共享数据，可以在模块级别声明它以访问相同的数据，或者如果您想为每个组件创建一个新的服务实例，可以在组件级别声明它

---

从代码中，您将在模块级别声明服务，因此如果您将该服务导入组件并尝试在组件中使用，它们将返回与单例服务相同的数据

如果直接子组件需要来自其父组件的数据，

@Input

应该能够帮助您实现所需的功能。