一尘不染

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

angularjs

我的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与默认子状态结合使用?


阅读 251

收藏
2020-07-04

共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

2020-07-04