在 Angular 中处理另一个组件内部的组件答案

【问题标题】：Handling Components Inside another Component in Angular在 Angular 中处理另一个组件内部的组件
【发布时间】：2019-07-16 09:43:04
【问题描述】：

我正在尝试在 Angular 中利用基于组件的架构 (CBA) 的概念。以下是场景：

我有三个具有不同选择器的组件。现在，在另一个第四个组件中，我正在尝试导入它们。这是通过在之后的 html 文件中添加它们的选择器来完成的。

第四个组件文件：component.html

<component1></component>
<component2></component>
<component3></component>
<component4></component>

所有子组件基本上都是带有数据的引导表。

此外，我正在使用 ngb-pagination 在这些组件中提供分页。

现在的问题是，每当我单击排序图标时，页面的控制权都会转移到子组件的 URL，这意味着整个页面都发生了变化。现在，我们需要再次单击图标以显示排序。

当您更改页码时，同样的问题仍然存在。这可能是因为 Angular 需要组件 URL 来使用可分页选项进行获取查询。

我正在使用 Jhiptser。

如果有办法请告诉我..

以下是截图：

这是主要的组件，它具有其他组件，例如部署和部署：

这是子组件。

现在，每当我从主组件页面单击排序按钮（任何按钮）时，第一次单击实际上不会执行该操作。它需要到子组件页面。之后，该功能按预期工作。

【问题讨论】：

请与我们分享您迄今为止所做的尝试，以便我们为您提供帮助。
我添加了屏幕截图以便更好地理解。
这与 jhipster 如何处理分页有关。这是一个复杂的特征。我建议你需要先了解它。
我不会使用 JHipster 为这个用例生成的模板，我会手动重写它们，这样分页状态就不会存储在路由中，排序也是如此。当您想提供外部链接时，使用角度路由进行分页是有意义的，而不是您的情况。

【解决方案1】：

解决方案非常简单。

Jhipster，默认使用ngb-pagination 模块来处理分页。（服务器端）。

使用像ngx-pagination 这样更流行的模块就可以完成这项工作。我们需要做的只是添加一些分页控件。

这个问题与this open issue有关。

【讨论】：