Question

我的应用程序中有两个组件。我在这里和网上搜索过，只找到了有关父母和子女关系的组件的确凿例子。

app.component.html如下：

<component1></component1>
<div class="container">
     <component2></component2>
</div>

我的（已清理的）component1使用一个函数来调用component2中的一个函数，该函数从一个服务获取并设置一些在component2范围内的变量，这些变量与component2的HTML中的数据绑定相关联。

//COMPONENT 1
private handler: component2Component;
ExecuteFunction(){
    console.log("Called");
    this.handler.GetLatest();
}

组件2中调用的函数如下：

//COMPONENT2
public GetLatest(): Subscription{
    console.log("GetLatest Called");
    return this._component2Service.GetLatestFromService()
    .subscribe(outputData => this.outputData = outputData, error => this.errorMessage = <any>error)
}

但是，我收到以下错误：无法在执行ExecuteFunction（）的component1按钮的位置读取未定义的属性GetLatest。

我是否需要首先实例化Component2的实例？遗憾的是，我处于严重的数据卫生要求之下。

我想知道如何从component1中的按钮调用component2 GetLatest（）方法。谢谢！

Answer 1

组件的目的只是提供与组件关联的视图所需的属性和方法。因此，任何组件都不需要在另一个组件中调用方法。

组件可能需要在它们之间传递数据，您可以使用路由参数，路由解析器或使用父/子组件定义的技术（@Input和@Output）来执行此操作。

如果您有更多通用/共享功能，那么该代码应该在服务中。然后，您的任何组件都可以访问该服务的方法。

解决此问题的一个选择是使用存储库模式。构建一个服务，其目的是检索和公开数据。此可能是您当前的数据服务。或者，您可以构建第二个服务，从数据服务中检索数据并公开它以供任一组件使用。

如果这些组件实际上不是app.component模板的一部分，那么另一种选择是使用路由解析器。这将允许您在导航到显示包含这两个组件的模板的路径之前检索数据。然后，两个组件都可以访问路由解析器检索的数据。

我在这里有一个路线解析器的示例：https://github.com/DeborahK/MovieHunter-routing

Angular 4：在两个相等层次结构

1 个答案: