Angular：嵌套状态在 UI-路由器中不起作用

Question

多级嵌套在 ui-router 中不起作用。我在名为 "tpl.hello.html" 的模板中添加了 "ui-view"，这是状态 "home.hello" 的模板。此 "home.hello" 状态是 "home" 状态的子状态。之后，我在 stateprovider 中添加了以下状态：

 .state('home.hello.test', {
      url: '/test',
      templateUrl: 'tpl.hellonested.html'
 })

但是这个 "home.hello.test" 状态不会在 "home.hello" 状态中加载。

这里是plunkr 看看。

Answer 1

我认为您对 ui-router 中嵌套的想法是错误的。子状态加载父状态，而不是相反。

在您自己的 plunkr 中，如果单击 link 测试，您可以看到父状态 (home.hello) 已加载到子状态 (home.hello.test) 中。

<div ui-view></div>只是定义了子视图在父视图中的位置。如果将它放在父视图的顶部，则子视图将加载在父视图的顶部，如果将其放置在底部，则子视图将加载在底部。

这方面有很好的文档link

希望对您有所帮助。

Answer 2

我没有发现任何问题，根据你的 plunkr，你的路线是

-Home
   *Home.Home1
      >Home.Home1.Test
   *Home.Home2

因此，如果您转到 "Home.Home1"，它将 NOT 加载"Home.Home1.Test", 但是如果你加载 "Home.Home1.Test"，它也会加载它的所有父状态。这是一个plunkr（只是稍微修改了一下）。

Angular: Nested state not working in UI-Router