在Angular中,可以通过服务来订阅子组件的更改。如果这个方法在你的代码中不起作用,可能是因为你没有正确地设置和使用服务。以下是一个解决方法的代码示例:
data.service.ts
的数据服务文件:import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new Subject();
public data$ = this.dataSubject.asObservable();
public updateData(data: string): void {
this.dataSubject.next(data);
}
}
DataService
,并在ngOnInit
生命周期钩子中订阅data$
流:import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.dataService.data$.subscribe((data: string) => {
console.log('Data from child component:', data);
});
}
onDataChange(data: string): void {
this.dataService.updateData(data);
}
}
DataService
,并在需要更新数据的地方调用updateData
方法:import { Component, Output, EventEmitter } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
constructor(private dataService: DataService) {}
changeData(): void {
const newData = 'New data from child';
this.dataService.updateData(newData);
}
}
以上代码示例中,父组件通过订阅data$
流来获取子组件的更改。子组件通过调用updateData
方法来更新数据,并通过dataChange
事件将更改的数据发送给父组件。