要在一个组件中使用由回调函数设置的服务属性,你可以通过以下步骤实现:
data.service.ts
的服务文件并定义一个属性和一个回调函数:import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string;
private callback: (data: string) => void;
setData(data: string) {
this.data = data;
if (this.callback) {
this.callback(data);
}
}
registerCallback(callback: (data: string) => void) {
this.callback = callback;
}
}
component1.component.ts
的组件文件,在该组件中注册回调函数并使用服务属性:import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component1',
template: `
Component 1
`,
})
export class Component1Component implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit() {}
setData() {
this.dataService.setData('Hello from Component 1');
}
}
component2.component.ts
的组件文件,在该组件中订阅服务属性的变化:import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component2',
template: `
Component 2
Data: {{ data }}
`,
})
export class Component2Component implements OnInit {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.registerCallback(this.updateData.bind(this));
}
updateData(data: string) {
this.data = data;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';
import { DataService } from './data.service';
@NgModule({
declarations: [AppComponent, Component1Component, Component2Component],
imports: [BrowserModule],
providers: [DataService],
bootstrap: [AppComponent],
})
export class AppModule {}
现在,当你在Component1Component
中点击按钮时,服务属性将被更新,并且Component2Component
中的数据也会相应更新。