Angular：嵌套状态在 UI-Router 中不起作用答案

【问题标题】：Angular: Nested state not working in UI-RouterAngular：嵌套状态在 UI-Router 中不起作用
【发布时间】：2016-10-03 16:10:26
【问题描述】：

多级嵌套在 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 看看。

【问题讨论】：

【解决方案1】：

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

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

所以如果你去"Home.Home1"，它会不加载"Home.Home1.Test", 但是如果你加载 "Home.Home1.Test"，它也会加载它所有的父状态。这是plunkr（只是稍微修改了一下）。

【讨论】：

【解决方案2】：

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

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

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

link 上有很好的文档

希望这会对你有所帮助。

【讨论】：

我知道子状态加载父状态，但我的问题与多级嵌套状态有关。所以，“home.hello”是“home.hello.test”的父状态，那么为什么它不呈现html。
它会渲染 html，但只有当你进入子状态时。单击您的最后一个链接（指向您的子状态），它将呈现您的子 html 和父 html。转到您的父状态不会呈现您的子 html。国家就是这样运作的。多级嵌套状态是相同的原理，只是层数更多。