在Angular中,组件间通信可以通过以下几种方式实现:
@Input()
装饰器接收父组件传递的值。EventEmitter
将值传递给父组件。子组件可以使用@Output()
装饰器和EventEmitter
来定义输出属性。父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
message: string;
receiveMessage($event) {
this.message = $event;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`
})
export class ChildComponent {
@Input() message: string;
@Output() messageEvent = new EventEmitter();
sendMessage() {
this.messageEvent.emit('Hello from child component!');
}
}
服务:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
message: string;
constructor() { }
}
组件A:
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component-a',
template: `
Component A
`
})
export class ComponentA {
constructor(private dataService: DataService) { }
sendMessage() {
this.dataService.message = 'Hello from component A!';
}
}
组件B:
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component-b',
template: `
Component B
{{ dataService.message }}
`
})
export class ComponentB {
constructor(public dataService: DataService) { }
}
以上是Angular中实现组件间通信的两种常见方法。根据具体的需求和场景,你可以选择适合的方式来实现组件间的通信。
下一篇:Angular中的组件路由