angularjs ui-router 默认子状态和 ui-sref [英] angularjs ui-router default child state and ui-sref

问题描述

我的 ui-router 状态提供程序中有以下状态:

I have the following states in my ui-router state provider:

$urlRouterProvider.when('/parent', '/parent/child');
$stateProvider.state('parent', {
     url: "/parent",
     abstract: true
});

$stateProvider.state('parent.child', {
     url: "/child"
});

这遵循了具有默认子状态的最佳实践，如所述此处 在 ui-router 文档中.

Which follows the best practice for having a default child state as explained here in the ui-router docs.

但是，当我现在在文档中的某处包含一个链接时，使用 ui-sref 引用父级，例如 <a ui-sref="parent">Link</a> 我总是收到一个错误，说我无法转换到抽象状态.当我在地址栏中手动输入 URL 并按 Enter 键时，一切正常.

However, when I now include a link in my document somewhere referencing parent with ui-sref such as <a ui-sref="parent">Link</a> I always get an error saying I cannot transition to an abstract state. When I enter the URL manually into the address bar and hit enter everything works fine.

相关Plunker:http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

如何将 ui-sref 与默认子状态结合起来?

How can I combine ui-sref with default child states?

推荐答案

不能直接针对抽象状态.它们主要作为建立子状态的基础.它与 URL 一起工作的唯一原因是/parent 被 .when

abstract states can not be targeted directly. They mainly serve as a foundation to build child states on. The only reason it works fine with the URL is that the /parent gets caught by the .when

这意味着当您使用

<a ui-sref="parent.child">

父级内部的子级被加载，这意味着父级将作为其周围的层加载.

the child inside the parent gets loaded, meaning the parent will be loaded as the layer around it.

因此，永远不要针对抽象状态本身.这就像在门框内有一扇门.您只能打开门(子)并与之交互，而不能直接与框架(父)进行交互.但是，当您与门互动时，门和框架是加载系统的一部分.

So, never target an abstract state itself. It's like having a door inside a door frame. You can only open and interact with the door (child), but never with the frame (parent) directly. However, when you interact with the door, the door and the frame are part of a system that gets loaded.

你可以给孩子一个空的 URL，这样它就不会在父状态 URL 上附加任何东西，然后就会被加载.

You can give the child an empty URL, so that it doesn't append anything to the parent state URL and will then be loaded.

请参阅此处了解更多信息:https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

See here for more info: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

这篇关于angularjs ui-router 默认子状态和 ui-sref的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！