示例代码:
// service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private messageSource = new Subject();
message$ = this.messageSource.asObservable();
sendMessage(message: string) {
this.messageSource.next(message);
}
}
// component1.ts
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component1',
template: `
`
})
export class Component1Component {
message: string;
constructor(private dataService: DataService) {}
sendMessage() {
this.dataService.sendMessage(this.message);
this.message = '';
}
}
// component2.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component2',
template: `
Messages:
- {{ message }}
`
})
export class Component2Component implements OnInit {
messages: string[] = [];
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.message$.subscribe(message => {
this.messages.push(message);
});
}
}
示例代码:
// component1.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-component1',
template: `
相关内容