如何在 ui-router angularjs 中保持父级相同的同时仅更改子级 ui-view？

Posted 2023-05-09

【中文标题】如何在 ui-router angularjs 中保持父级相同的同时仅更改子级 ui-view？

【英文标题】：How to change only child ui-view while keeping parent as same in ui-router angularjs?

【发布时间】：2016-09-12 10:26:56

【问题描述】：

我在 index.html 中有一个ui-view。

在这个 ui 视图中，我添加了子 ui-view="child1"，它使用带有嵌套视图的 $stateProvider 状态可以正常工作。现在在选项卡开关上，我只想更改名为“child1”的子 ui-view，但保持父 ui-view 相同（因为我在同一页面上，只是页面的一部分正在更改）。

有什么方法可以使用路由来实现吗？我还想更改 url 参数，以便在刷新时知道打开了哪个选项卡，以便我可以使用路由打开相同的选项卡。

$stateProvider
    .state('main', 
      url: '/',
      views: 
        '': 
          templateUrl: 'assets/views/main.html',
          controller: 'mainInitCtrl',
        ,
       'child1': 
          templateUrl: 'assets/views/child1.html',
          controller: 'childInitCtrl',
        
      
    );

【问题讨论】：

为两个视图命名

【参考方案1】：

您不仅应该尝试使用嵌套视图，还应该尝试使用嵌套状态。所以每个选项卡都会触发子状态。这样，父视图（未命名）将始终保持不变，而子视图将随着每个标签的点击而改变

// parent state main
.state('main', 
  url: '/',
  views: 
    '': 
      templateUrl: 'assets/views/main.html',
      controller: 'mainInitCtrl',
    ,
  
);
// select a tab1 and go to main.tab1 state
// parent view will stay, and "child1" view in index.html 
// will be replaced with content below
.state('main.tab1', 
  url: '/tab1',
   'child1@': 
      ...
    
  
)
// another tab
.state('main.tab2', 
  url: '/tab2',
   'child1@': 
      ...
    
  
)

与工作plunker类似的问答

Angular ui-router... Display default tab

但如果我们想让ui-view="child1" 位于未命名的ui-view 内 - 我们只需要进入父“主”状态模板

资产/视图/main.html：

<div>
  main content
  ...
  <div ui-view="child1"></div>
</div>

这更有意义，并且适合大多数情况。但是子状态定义现在必须针对父 'main' 而不是 index.html，如下所示：

.state('main.tab1', 
  url: '/tab1',
   //'child1@': 
   'child1': 
      ...
    
  
)
// another tab
.state('main.tab2', 
  url: '/tab2',
   //'child1@': 
   'child1': 
      ...
    
  
)

【讨论】：

如果可能的话，您能否提供一些详细的解释或jsfiddle？如何在选项卡开关上调用更改部分？我需要保持视图名称与“child1@”相同吗？我是否需要通过 \tab1 和 \tab2 更改 url 或以某种方式调用状态更改？对不起，我是 ui-router 的新手。好像你提到的我需要完全相同但无法正确理解。

是的，已经附上了一个示例 plunker。在这个问答中，您甚至可以找到另一个，正常工作并展示 UI-Router 和选项卡的强大功能***.com/a/29491412/1679310

这个 QA 答案看起来很棒。谢谢

祝 UI-Router 好运 ;)