Angular组件间共享数据无法正常工作。
- 使用服务(Service)来共享数据 在一个服务中定义一个属性，用来存储要共享的数据。然后在需要访问这个数据的组件中注入该服务。这样，在任何组件中修改服务中的数据，其他组件就可以访问到这些修改后的数据。 例如，定义一个DataService服务来共享数据：
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root', }) export class DataService { sharedData: any;
constructor() { } }
在组件中注入该服务，并在需要使用共享数据的组件中使用该服务：
import { Component } from '@angular/core'; import { DataService } from './data.service';
@Component({
selector: 'app-child',
template: {{ sharedData }} ,
})
export class ChildComponent {
sharedData: any;
constructor(private dataService: DataService) { this.sharedData = this.dataService.sharedData; }
changeData() { this.dataService.sharedData = 'New shared data'; } }
- 使用@Input()和@Output()来共享数据 @Input()用来在父组件中将数据传递给子组件。@Output()用来在子组件中将数据传递给父组件。 例如：
// 父组件 import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: ,
})
export class ParentComponent {
data = 'Shared data';
handleOutput(data) { console.log(data); } }
// 子组件 import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: {{ inputData }} ,
})
export class ChildComponent {
@Input() inputData: any;
@Output() outputData =