在Angular中,在两个应用之间传输数据的一种常见方法是使用@Input()
和@Output()
装饰器以及事件触发器。
下面是一个示例,展示了如何在两个Angular应用之间传输数据:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentData = 'Hello from Parent';
sendData() {
this.parentData = 'Updated Data from Parent';
}
receiveData(data: string) {
console.log('Data received in Parent:', data);
}
}
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Data from Parent: {{ data }}
`
})
export class ChildComponent {
@Input() data: string;
@Output() dataEvent = new EventEmitter();
sendData() {
const newData = 'Data from Child';
this.dataEvent.emit(newData);
}
}
在这个示例中,@Input()
装饰器用于接收来自父组件的数据,@Output()
装饰器和EventEmitter
用于将数据从子组件发送给父组件。
当点击父组件中的按钮时,sendData()
方法会更新父组件的数据。子组件中的模板会实时显示这个数据。
当点击子组件中的按钮时,sendData()
方法会触发dataEvent
事件,将子组件中的新数据传递给父组件。
可以根据需要在组件之间传递不同类型的数据。