angularjs ui-router默认子状态和ui-sref

Question

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

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

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

这遵循具有默认子状态的最佳实践，如所解释的 here在 ui-router 文档中。

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

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

如何组合 ui-sref有默认子状态吗？

Answer 1

抽象状态不能直接定位。它们主要作为构建子状态的基础。它与 URL 配合良好的唯一原因是/parent 被 .when 捕获

这意味着当您使用

调用子级时

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

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

因此，永远不要以抽象状态本身为目标。这就像在门框内有一扇门。您只能打开门(子级)并与之交互，而不能直接与门框(父级)进行交互。然而，当您与门交互时，门和门框是被加载的系统的一部分。

您可以为子级提供一个空 URL，这样它就不会向父级状态 URL 附加任何内容，然后将被加载。

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