在Angular中,有许多方法可以在组件之间传递数据。以下是一些常见的方法:
父组件模板:
子组件中使用@Input():
export class ChildComponent {
@Input() message: string;
}
子组件模板:
子组件中使用 EventEmitter:
export class ChildComponent {
@Output() messageEvent = new EventEmitter();
message = 'Hello World!';
sendMessage() {
this.messageEvent.emit(this.message);
}
}
父组件中使用:
在父组件中实现 receiveMessage 函数:
receiveMessage($event) {
this.message = $event;
}
创建服务:
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject("default message");
currentMessage = this.messageSource.asObservable();
changeMessage(message: string) {
this.messageSource.next(message);
}
}
在组件中使用该服务:
export class AppComponent {
message: string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage('Hello from App Component');
}
}