ui-router：命名视图（多个）视图，保持一切解耦？

Posted 2021-04-06

我刚刚开始使用ui-router并且我正在创建组件（角度1.5）并使用此处解释的新组件方法，尽管它应该无关紧要 - http://angular-ui.github.io/ui-router/1.0.0-alpha.5/interfaces/ng1.ng1viewdeclaration.html#component

我想我需要查看各州的绝对和相对观点。让我为我的问题画出图片，可能更好的解释。

我有许多高级组件（使用1.5角组件）。一些高级组件具有子组件，但我不想将这些组件紧密地结合在一起。

因此，以搜索组件为例，在此搜索组件中，它依赖于历史记录项和已保存的项。历史记录项和保存的项都是子组件。保存的项目还有2个孩子：云项目和本地项目。

所以在搜索组件中我不想将它紧密地耦合到子组件，因为我可以使用没有子组件的搜索组件，所以我考虑使用相对视图。

我可以放2个

<div ui-view></div>

在搜索组件和2 x

<div ui-view></div>

在保存的项目中。

但它只是感觉不对，我并没有特别紧密地与特定的视图名称耦合，但仍然搜索组件期望2个孩子和保存的项目也会期望2，这可能不是这种情况。

也许我正在过度思考并使我的组件太小？但我希望它们能够更好地构建，从技术上讲，搜索可以在没有孩子的情况下存在。

答案

如果我已正确理解您的问题，您可能想要做的是将您的父组件指令限制为Element restrict:'E'并将子组件添加为此指令的属性将它们限制为属性restrict:'A'

并在指令和链接函数中使用指令来处理子指令

所以你的最终指令看起来应该是这样的

<ui-view newattr1 newattr2></ui-view>

其中ui-view将是您的父组件和newattr1，newattr2将是子组件。如果你的<ui-view newattr1 newattr2></ui-view>中没有子组件的子组件的相应链接功能。

另一答案

一种方法（如果我正确理解了问题），即使它可能感觉像是一种解决方法，也可以创建共享许多相同逻辑的多个组件。

var setup = {
  controller: searchController,
  bindings: {
    a: '=',
    b: '<',
    c: '@'
  }
};

angular.module('app')
  .component('search', angular.extend(setup, {
    templateUrl: 'search.html'
  }))
  .component('searchWithChildren', angular.extend(setup, {
    templateUrl: 'search-with-children.html'
  }));

var searchController() {
  ...

另一答案

我可能不理解你的问题，但从我所拥有的，你可以有一个可以作为抽象层的中间组件。

如果你的组件没有真正紧密耦合（似乎是关于你的搜索组件和历史的情况），你可以在“更高级别的组件”中简单地做出类似的东西。

<!-- We're inside an higher component with some data initialization -->
<!-- passing data by references, this way both component use the same data -->
<search-cmpt search-terms="searchTermsFromHigher"/>
<history filter-terms="searchTermsFromHigher"/>
<div ui-router></div> <!-- in which you resolve another component not tightly coupled -->

在我看来，这里的关键问题不是如何组织组件，而是如何在它们之间传递数据。我对吗 ？如果是这种情况，您可能会考虑以不同的方式管理您的前端状态。

注意：我可能没有正确地得到问题。

另一答案

我不会在搜索组件中使用任何视图。否则，您将强制其消费者了解其状态，以激活其2个孩子。

我的印象是你在思考它。只要它的子项是特定的，意味着它们在其他任何地方都没有使用，我认为在它们的父组件中明确声明它们没有任何错误。