导航到子状态也会刷新其父状态

Navigating to a child state refreshes its parent state too

本文关键字：状态 刷新 导航      更新时间：2023-09-26

我将尝试提供一个示例伪代码，以便能够尽可能详细地解释我的问题。我不能在这里放一个工作代码，因为那里涉及太多的层、指令和模板。

我的基本结构是：

...
<div>
   <div ui-view>
       <div ui-view></div>
   </div>
</div>
...

当父级ui-view中的代码执行$state.go以更新子级ui-view时，父级也将再次加载。

假设父状态称为contact，子状态为details。我的$state.go调用是$state.go("contact.details")，$stateProvider配置如下所示：

$stateProvider.state({ name: "contact" /*,  rest of properties */ });
$stateProvider.state({ name: "contact.details", /*,  rest of properties */ });

此外，整个子ui-view发生在指令交叉中。假设它是：

<div>
   <div ui-view>
       <directive>
           <content>
                <div ui-view></div>
           </content>
       </directive>
   </div>
</div>

根据这些详细信息，您是否发现任何问题？为什么$state.go("contact.details")也重新加载contact？（注意，contact.details已加载，但重新加载contact会产生副作用，因为控制器会再次执行…）

更新

如果我在contact的控制器上调用$state.go("details")，也会发生同样的问题，但一旦加载，当我将$state.go调用到其他子状态时，每个子状态都会按预期打开，但父状态的控制器会再次调用。

我没有这个问题，但我和你有一个不同，我的父状态要么是抽象的，要么重定向到他的控制器中的默认子状态。

所以我会有

$stateProvider.state({ name: "contact" /*,  rest of properties */ 
      controller:['$state', function($state){
         if($state.current.name=='contact'){
              $state.go('contact.main');
         }
      }]
 });
$stateProvider.state({ name: "contact.main", /*,  rest of properties */ 
$stateProvider.state({ name: "contact.details", /*,  rest of properties */ });

最后，我发现了如何解决我的问题/场景。

  1. 我已经切换到使用dot语法作为第一个参数来注册子状态。例如CCD_ 17而不是CCD_。我知道我的问题说我在使用name: "a.b"注册各州。自从我发表这篇Q&A.

  2. 我现在调用子状态的controller中的$state.go("a.b")来打开默认的子状态（这是问题的根源）。请参阅Angular JS ui路由器如何从父级重定向到子级状态？和

相关文章：