在Angular中,在组件之间传递临时数据最佳方式是使用服务来存储该数据。服务是一个单例对象,可以在整个应用程序中共享数据。
下面是一个简单的示例,演示如何在服务中存储和获取数据以进行组件之间的通信:
1.创建一个服务
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class DataService { private data:any;
setData(data:any) { this.data = data; }
getData() { return this.data; } }
2.在需要使用数据的组件中注入服务
import { Component } from '@angular/core'; import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template:
})
export class Component1Component {
constructor(private dataService: DataService) {}
onClick() { this.dataService.setData({name:'John Doe'}); } }
3.在需要接收数据的组件中注入服务并获取数据
import { Component } from '@angular/core'; import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: Received Data: {{data.name}}
})
export class Component2Component {
data:any;
constructor(private dataService: DataService) {}
ngOnInit() { this.data = this.dataService.getData(); } }
在这个例子中,我们创建了名为DataService的服务,用于存储数据。在组件1中,我们注入了该服务,并调用了setData方法来存储数据。在组件2中,我们注入了同一服务,并调用了getData方法来获取该数据。
这就是在Angular 8中存储和传递数据的最佳方式。
上一篇:Angular8:如何编写一个指令,将文本输入转换并应用到ngModel中。
下一篇:Angular8:是否有一种方法在typescript文件中解析模板(其中包含Angular代码,例如ngFor),并获取HTML输出?