angular - 如何使用服务调用孙组件中的函数

Question

完整代码示例：https ://stackblitz.com/edit/angular-iphgxf

如何从孙子组件访问方法？我正在尝试使用服务来解决此问题，但鉴于以下情况，我不知道如何对其进行最后润色：

如果有未保存的数据（ https://angular.io/guide/router#candeactivate-handling-unsaved-changes），我正在尝试实现 CanDeactivateGuard 以防止用户导航离开页面。我在本指南中使用了相同的方法，其中我的页面组件中有一个 canDeactivate 方法，该方法由警卫的 canDeactivate 方法调用。

我的问题是我的 entity/:id 路由的组件是一个容器组件，而我保存表单数据的表示组件是路由组件的孙子。我需要访问 canDeactivate() 逻辑的实体详细信息组件中的表单。我需要我的路由组件的 canDeactivate 函数来访问实体详细信息组件上的另一个 canDeactivate 函数或访问表单数据以执行验证。

我正在为我的 entity/:id 路由（映射到 view-entity-page）使用与 @ngrx example-app（参见 book 模块）类似的架构，其中我有一个 view-entity-page 容器组件负责映射路由器参数到@ngrx/store 中的“选择”实体操作。这个组件有一个子组件，selected-entity-page，它负责与@ngrx/store 一起将实体数据传递给实际的表示组件entity-detail。这可能有点矫枉过正，但这是我现在所拥有的......

标签： angularrxjsngrx

Answer 1

遵循容器模式，您可以在孙子中定义一个输出属性（事件），以在数据更改时通知其父级。然后，该父（子）还需要定义一个通知其父（祖父）的输出属性（事件）。这样，祖父母就可以获得路线守卫所需的信息。

另一种方法是将“dataChanged”属性添加到存储中，以便孩子可以调度操作并设置该属性。然后守卫可以从存储中读取数据，或者祖父母可以从存储中读取数据并将其提供给守卫。