在Angular中,父子组件之间传递数据可以通过输入属性和输出属性来实现。下面是一个简单的示例:
父组件(parent.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
export class ParentComponent {
parentMessage = "Message from parent";
receiveMessage($event) {
console.log($event);
}
}
子组件(child.component.ts):
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");
}
}
在上述示例中,父组件通过输入属性[message]
将数据传递给子组件,子组件使用@Input()
装饰器接收该属性。子组件通过@Output()
装饰器定义一个事件messageEvent
,并使用EventEmitter
发送数据给父组件。
在父组件的模板中,我们将父组件的parentMessage
传递给子组件的message
属性,并通过(messageEvent)
监听子组件发送的事件。父组件通过receiveMessage()
方法接收子组件发送的数据。
当子组件的按钮被点击时,调用sendMessage()
方法将数据发送给父组件。
这样,父子组件之间的数据传递就完成了。
上一篇:Angular 复选框无法禁用
下一篇:Angular 父组件到子组件