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

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

HTML模板：

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

的showConfirmation()方法在dialog-box.component.ts

发现在我showConfirmation()，我有一个jQuery允许的语义UI模式

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

来源

2017-06-16 Char

你观看可以使用角度核心的viewChild装饰器

@ViewChild(dialogComponent) 
    private localDialog: dialogComponent 

showConfirmation() { 

this.localDialog.showConfirmation(); 
}

，你可以得到更多的细节here

来源

2017-06-16 02:01:05 fastAsTortoise

我应该在哪里放呢？在目前的组件？ – Char

它说“无法找到名称”ViewChild“” – Char

是的，对话框将是你的子组件 – fastAsTortoise

还有就是角文档的目的是回答这个问题的整个章节。你可以在这里找到它：https://angular.io/guide/component-interaction

关键的参数是：来自亲

将数据传递给孩子输入结合
拦截输入物权变动二传手
与ngOnChanges拦截输入属性更改（）
家长倾听儿童事件
家长通过本地变量与孩子互动
父调用一个@ViewChild（）
组件通过服务

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

来源

2017-06-16 02:12:24 DeborahK

父母 - 子女关系中的一种方法是让父母监听孩子上的事件。孩子需要的输出：@Output() onShowConfirmation = new EventEmitter<boolean>();和功能上它发出事件，像这样：

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

然后，在父模板，在父组件的子组件的输出绑定功能：

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

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

或者，您可以使用服务来协调这两个组件。这真的取决于他们的关系。看看这里的角文档，看看会是什么给你的配置，最好的办法：

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

来源

2017-06-16 02:16:31 SpaceFozzy

有没有办法让我打开一个模式通过服务？因为它不会读取showConfirmation（）方法 – Char

我其实不认为你应该提供服务来协调它们，除非你有多个部分或组件的删除按钮你的应用程序我很乐意帮助你解决你的实际代码，如果你能制造一个笨蛋或者你的问题的例子。事实上，如果你只需要一个si多确认框，我建议你看看像https://github.com/toverux/ngsweetalert2。 – SpaceFozzy

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

回答

相关问题