Angular子组件如何调用父组件的sayhello()方法？

嘿，我知道你卡在哪了！你现在的写法犯了一个常见的小错误——你在模板里写[sayhello] = "sayhello()"的时候，加了括号就相当于立刻执行父组件的sayhello方法，然后把它的返回值（这里是undefined）传给子组件，而不是传递方法本身的引用，难怪子组件调用不了。

下面给你两种可行的解决方案，按需选择：

方案1：直接传递方法引用（适合简单回调场景） #

这种方式是修正你原本的思路，把方法本身传给子组件：

1. 修改父组件模板：去掉方法名后的括号，传递方法引用

<p>parent</p>
<children [sayhello]="sayhello"></children>

2. 子组件保持@Input定义，调用时直接执行

import { Component, Input } from '@angular/core';

@Component({
  selector: 'children',
  templateUrl: './children.component.html'
})
export class ChildrenComponent {
  @Input() sayhello: Function;

  callHellotoConsole() {
    // 现在可以正确调用父组件的方法了
    this.sayhello();
  }
}

方案2：用@Output事件绑定（Angular推荐的单向数据流方式） #

Angular更推荐子组件通过事件通知父组件执行方法，这样更符合组件间单向数据流的设计理念，也能避免子组件直接依赖父组件的方法逻辑：

1. 子组件定义@Output事件发射器

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'children',
  templateUrl: './children.component.html'
})
export class ChildrenComponent {
  @Output() callHello = new EventEmitter<void>();

  callHellotoConsole() {
    // 触发事件，通知父组件执行方法
    this.callHello.emit();
  }
}

2. 父组件模板绑定事件

<p>parent</p>
<children (callHello)="sayhello()"></children>

3. 父组件的sayhello方法保持不变

sayhello() { 
  console.log("hello");
}

小建议 #

如果只是子组件需要触发父组件的某个操作，优先用方案2，因为它让组件间的通信更清晰，子组件不需要知道父组件具体做了什么，只需要发出事件即可；如果是复杂的回调场景（比如需要子组件传递参数给父组件方法），方案1也可以用，但要注意避免组件间过度耦合。

内容的提问来源于stack exchange，提问作者phutran