ui-router:命名视图(多个)视图,保持一切解耦?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ui-router:命名视图(多个)视图,保持一切解耦?相关的知识,希望对你有一定的参考价值。

我刚刚开始使用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个孩子。

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

以上是关于ui-router:命名视图(多个)视图,保持一切解耦?的主要内容,如果未能解决你的问题,请参考以下文章

angularJs ui-router路由之多视图实现菜单缓存切换

ui-router详解ngRoute工具区别

在每个页面中使用嵌套视图时如何使用 ui-router 进行页面重定向?

如何在 ui-router angularjs 中保持父级相同的同时仅更改子级 ui-view?

UI-Router:如何在切换视图时保留视图

带有 ui-router 的 CSS 滑动视图