【问题标题】：angular2 call function of parent componentangular2调用父组件的函数
【发布时间】：2016-06-26 17:50:26
【问题描述】：

我有一个应用程序，其中有一个可以上传文件的上传组件。它嵌入在body.component 中。

在上传时，它应该使用父组件的一个函数（例如BodyComponent.thefunction()）（调用更新数据）：但前提是它的父组件是body.component。上传也可能在其他地方以不同的行为使用。

类似parent(this).thefunction()，怎么做？

【问题讨论】：

【解决方案1】：

我会在子组件中创建一个自定义事件。像这样的：

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

您的父组件可以注册此事件

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

另一种方法是将父组件注入到子组件中，但它们会紧密联系在一起......

【讨论】：

知道为什么我有一个输出未定义错误吗？它是通过从angular2/core 导入在顶部的打字稿中定义的。控制台日志显示 angular2-polyfills 存在问题
哦，我的回答中有错字：@Ouput 而不是@Output。这可能是问题...我更新了我的答案。
呵呵，没注意。就是这样。
现在得到一个uploadComplete is not defined 请注意，我只是复制了这些作为示例。父级也有“someMethod”，但它已经有uploadComplete 的问题。父组件确实在子节点上使用（上传的）绑定，并且它已经将子节点作为指令。
@Component 中的指令和管道已从 Angular RC6 中弃用。

【解决方案2】：

下面是最新的对我有用的代码

Angular 5+

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

在ParentTemplate的模板中

<child-component (myEvent)="anyParentMethod($event)"

【讨论】：

这是一个很好的解决方案，因为它很简单，并且由父级决定调用哪个方法。我喜欢:-)
如果我使用路由器插座怎么办？我还能使用 (myEvent) 吗？
它用于父组件内部的子组件。不确定关于路由器插座。可能这个问题对你有帮助。 stackoverflow.com/questions/45949476/…

【解决方案3】：

不涉及事件的解决方案。

假设我有一个ChildComponent，并且我想调用属于ParentComponent 的方法myMethod()（保留原始父级的上下文）。

父组件类：

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

父模板：

<app-child [myMethod]="myMethodFunc"></app-child>

子模板

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

【讨论】：

我尝试过使用它，但它对我不起作用。在我的 myMethod 版本中，它引用了父组件上的选项卡集（我正在尝试从父组件的子组件切换选项卡）。当我在父级中引用它时，一切正常。从孩子开始，它进入 myMethod，但不更改选项卡。所以我想知道当孩子访问它时，它所引用的标签集是否是真实标签集的副本。当this.myMethod.bind(this) 被返回时，我实际上并不确定这里发生了什么。（可能我在做一些根本错误的事情。）
我知道，但我没有使用第 8 版。对于使用 5 版本的 Ionic 3，我需要这个。
@VasilisGreece 我不确定如何帮助你，但我强烈建议你更新到最新的 Ionic 版本（当前为 4）
调用父类方法的最简单最直接的方法，避免不必要的导入。在 2020 年 11 月 13 日使用 Angular 10。赞赏。
这适用于 2022 年 1 月 27 日，我尝试了很多其他方法，包括 Output()，但它们都失败了，但这有效！谢谢你，你太棒了。

【解决方案4】：

您可以将父组件注入到子组件中。

有关详细信息，请参阅
- How do I inject a parent component into a child component?
- Angular 2 child component refers to parent component 这样，您可以确保仅在父级为 body.component 时才调用 thefunction()。

constructor(@Host() bodyComp: BodyComponent) {

否则，最好使用@Output() 来实现子级与父级之间的通信。

【讨论】：

顺便说一句，我不得不做constructor(@Host() bodyComp: BodyComponent).. 也许它最近被改变了。效果很好，谢谢！
非常感谢，我弄混了一些东西 - 已修复