### 实现
Angular 子
组件调用父
组件方法的方式
在
Angular 中，子
组件可以通过 `@Output`
和 `EventEmitter` 将事件传递给父
组件，从而间接
调用父
组件中的方法。这种方式遵循单向数据流原则，即子
组件不直接操作父
组件的状态或逻辑，而是通过事件通知父
组件执行特定的操作。
以下是具体的实现方式：
#### 使用 `@Output`
和 `EventEmitter`
1. **定义子
组件**
在子
组件中
创建一个基于 `EventEmitter` 的属性，并将其标记为 `@Output()`。当某个条件满足时（例如点击按钮），可以发射该事件并携带参数到父
组件。
```typescript
import { Component, Output, EventEmitter } from '@
angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendDataToParent()">发送消息</button>
`,
})
export class ChildComponent {
@Output() notifyParent = new EventEmitter<string>();
sendDataToParent(): void {
const message = "来自子
组件的消息";
this.notifyParent.emit(message); // 发射事件并将消息作为参数传递
}
}
```
2. **绑定父
组件监听器**
在父
组件模板中，将子
组件的 `notifyParent` 输出属性绑定到父
组件的一个处理函数上。
```html
<!-- 父
组件模板 -->
<app-child (notifyParent)="handleMessage($event)"></app-child>
<p>接收到的消息：{{ receivedMessage }}</p>
```
3. **定义父
组件处理函数**
在父
组件类中编写用于接收
和响应子
组件事件的函数。
```typescript
import { Component } from '@
angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent {
receivedMessage: string;
handleMessage(data: string): void {
console.log("接收到的数据:", data);
this.receivedMessage = data;
this.parentMethod(); //
调用父
组件的方法
}
parentMethod(): void {
console.log("父
组件方法被
调用了");
}
}
```
上述代码展示了如何利用 `@Output`
和 `EventEmitter` 让子
组件触发父
组件中的方法[^1]。
---
#### 关于 `@Input` 方法的局限性
需要注意的是，如果尝试通过 `@Input` 属性直接传入父
组件的方法，则会遇到作用域问题。具体表现为，在子
组件内部
调用此方法时，其上下文 (`this`) 是子
组件实例而非父
组件实例。因此无法访问父
组件的相关状态或成员变量[^2]。
为了避免这种混淆，推荐始终采用 `@Output` 配合回调机制来完成父子
组件间的交互需求。
---
#### 另一种方式——双向绑定与服务共享
虽然题目主要讨论了子
组件调用父
组件方法的情况，但在某些场景下也可以考虑其他替代方案：
- **双向绑定**: 如果只是简单的值同步更新，可借助 `ngModel` 或自定义输入/输出组合实现。
- **服务共享**: 对于更复杂的跨层次通信需求，建议引入独立的服务层来进行集中管理，减少
组件间耦合度。
不过这些都不属于严格意义上的“子
组件主动
调用父
组件方法”，仅提供额外思路供参考。
---
### 总结
最佳实践中提倡使用 `@Output` 结合 `EventEmitter` 来建立从子
组件到父
组件的通知渠道，既保持清晰分离又易于维护扩展[^3]。
```typescript
// 子
组件部分
import { Component, Output, EventEmitter } from '@
angular/core';
@Component({...})
export class ChildComponent {
@Output() customEvent = new EventEmitter<any>();
}
// 父
组件部分
<app-child (customEvent)="onChildAction($event)"></app-child>
```
本文详细介绍了在Angular中创建和使用组件的过程。从组件的概念出发，通过具体步骤演示了如何利用命令行工具ng generate创建组件，并在根目录中调用新建组件的方法。
扫一扫
1760
到【灌水乐园】发言
