Question

我在root（app文件夹） 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

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

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

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

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

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

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

Answer 2

根据您对整个应用程序或组件级别服务的单一服务的使用方式，您可以在模块的providers [servicename]中声明，也可以在组件中以相同的方式声明它

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

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

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

2 个答案: