在Angular中,有几种方法可以简化组件之间的通信。以下是其中一种方法的示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentMessage = "Message from parent";
receiveMessage($event) {
this.parentMessage = $event;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ message }}
`
})
export class ChildComponent {
@Input() message: string;
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit("Message from child");
}
}
服务:
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);
}
}
发送组件:
import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-sender',
template: `
Sender Component
`
})
export class SenderComponent {
constructor(private dataService: DataService) { }
sendMessage() {
this.dataService.sendMessage("Message from sender");
}
}
接收组件:
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-receiver',
template: `
Receiver Component
{{ message }}
`
})
export class ReceiverComponent implements OnInit {
message: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.message$.subscribe(message => this.message = message);
}
}
以上是两种Angular中简化组件间通信的方法及其示例代码。您可以根据具体的需求选择适合的方法来实现组件间的通信。