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

Question

我的ui路由器状态提供程序中具有以下状态：

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

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

这遵循具有默认子状态的最佳做法，如ui-router文档中此处所述。

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

相关Plunker：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