Angular 2：如何从另一个组件调用方法

Question

我的html模板中有一个调用方法的按钮，但是在自己的组件中找不到此方法。它在另一个组件中找到。我该怎么办？

HTML模板：

<button class="ui button basic medium" (click)="showConfirmation()">Delete</button>

在showConfirmation()

中找到dialog-box.component.ts方法

在我的showConfirmation()中，我有一个允许查看Semantic-UI模式的jQuery

showConfirmation(show: boolean){
      $('.ui.small.modal').modal('show');
}

Answer 1

Angular文档中有一整章旨在回答这个问题。您可以在此处找到它：https://angular.io/guide/component-interaction

关键选项是：

• 使用输入绑定将数据从父级传递给子级
• 使用setter拦截输入属性更改
• 使用ngOnChanges（）
拦截输入属性更改
• 父级侦听子事件
• 父级通过本地变量
与子级进行交互
• Parent调用@ViewChild（）
• 组件通过服务进行通信

正如在这些文本中所提到的，除了最后一个假设两个组件都有父/子关系，这意味着其中一个组件嵌套在另一个组件中。

Answer 2

在亲子关系中，一种方法是让父母听取孩子的事件。孩子需要一个输出：@Output() onShowConfirmation = new EventEmitter<boolean>();和一个发出事件的函数，如下所示：

showConfirmation(show: boolean) {
    this.onShowConfirmation.emit(show);
    this.confirmationShown = true;
}

然后，在父模板中，将父组件中的函数绑定到子组件上的输出：

<confirmation-widget>
    (onShowConfirmation)="onShowConfirmation($event)">
</confirmation-widget>

这只是下面链接的文档中示例的修改版本。

或者，您可以使用服务来协调这两个组件。这真的取决于他们的关系。在这里查看Angular文档，看看给出配置的最佳方法是什么：

https://angular.io/guide/component-interaction#component-interaction

Answer 3

你可以使用angular core

中的viewChild装饰器

 @ViewChild(dialogComponent)
  private localDialog: dialogComponent

showConfirmation() {

this.localDialog.showConfirmation();
}

您可以获得更多详细信息here