Angular中从子组件到父组件的组件通讯失败
- 使用@Output装饰器和EventEmitter类在子组件中引发事件并将数据发送到父组件。 父组件应使用事件绑定语法和处理程序来接收和处理子组件发出的事件。以下是一个示例：
子组件：
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'child-component',
template:
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter
sendMessage() { this.messageEvent.emit('Hello from child component!'); } }
父组件：
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: {{message}}
})
export class ParentComponent {
message:string;
receiveMessage($event) { this.message = $event } }
- 使用@ViewChild装饰器获取子组件的引用，并在父组件中调用子组件的公共方法以获取数据。以下是一个示例：
子组件：
import { Component } from '@angular/core';
@Component({ selector: 'child-component', template: `` }) export class ChildComponent { message:string = 'Hello from child component!';
getMessage() { return this.message; } }
父组件：
import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component';
@Component({
selector: 'parent-component',
template: {{message}}
})
export class ParentComponent {
message:string;
@ViewChild(ChildComponent) childComponent: ChildComponent;
ngAfterViewInit() { this.message = this.childComponent.getMessage(); } }