我的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时,一切正常。
ui-sref
<a ui- sref="parent">Link</a>
相关Plunker:http ://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview
如何ui-sref与默认子状态结合使用?
抽象状态不能直接作为目标。它们主要作为建立子状态的基础。它与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