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

【问题标题】：Angular: Best way to pass data between components?Angular：在组件之间传递数据的最佳方式？
【发布时间】：2018-11-10 22:27:02
【问题描述】：

我在根目录（应用文件夹）中有一个界面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>

【问题讨论】：

如果直接子组件需要来自其父组件的数据，@Input 应该能够帮助您实现所需。

标签： angular web-services typescript command-line-interface

【解决方案1】：

一种方法是使用依赖注入，您可以通过在 providers-section 中声明数据服务来在模块级别或组件级别使用它。

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

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

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

如果你这样做，你也可以在这个组件的所有子组件中使用这个服务。

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

【讨论】：

【解决方案2】：

根据您希望如何将它用作整个应用程序或组件级服务的单例服务，您可以在模块的 providers[servicename] 中声明，也可以在组件中以相同的方式声明它

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

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

【讨论】：