Angular:在组件之间传递数据的最佳方式？
Angular:在组件之间传递数据的最佳方式？
提问于 2018-06-01 04:23:27
我在根目录(应用程序文件夹) 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-service.ts中的API服务中获取数据。
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-01 04:39:43
一种方法是使用依赖注入，您可以在模块级别或组件级别使用它，方法是在providers部分中声明一个数据服务。
例如，在组件中，它将如下所示
@Component({
providers: [AService] // < - provided,
template : `<todos></todos>`
})
export class AComponent {
constructor(private aservice: AService) {}
}如果您这样做，您还可以在此组件的所有子组件中使用此服务。
在模块中，这几乎是相同的，但是服务在该模块的所有声明的组件中都是可见的。
Stack Overflow用户
发布于 2018-06-01 05:10:59
根据您希望将其用作整个应用程序的单例服务或组件级服务的方式，您可以在模块中的providersservicename中声明它，也可以在组件中以相同的方式声明它
只需为所有组件创建一个公共服务，如果您想要在两者之间共享数据，您可以在模块级别声明它以访问相同的数据，或者如果您想为每个组件创建一个新的服务实例，您可以在组件级别声明它
从您的代码中，您将在模块级别声明服务，因此，如果您在组件中导入该服务并尝试在其中使用它，它们将返回与它是单例服务相同的数据
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50632238
复制相关文章
相似问题