角度 UI 路由器为所有状态提供多个命名视图

Angular ui router multiple named views for all states

本文关键字：视图 状态 路由器 UI 角度      更新时间：2023-09-26

我想知道是否有任何方法可以为所有状态编写多个命名视图，最好的例子是当我希望导航栏和页脚出现在所有路由中时。

$stateProvider
  .state('home',{
    views: {
      'home': {
        templateUrl: 'home.html',
        controller: controller
      },
      'nav': {
        templateUrl: 'nav.html',
        controller:controller
      },
      'footer': {
        templateUrl: 'footer.html',
        controller: controller
      },
    }
  })

我不想使用 ng-include，因为在这种情况下，导航和页脚是在解析家乡状态之前显示的。

是的，你可以，它实际上写在ui-router指南中，介绍如何管理多个命名视图。

首先，您需要定义一组抽象状态的特定命名视图，包括将所有内容视图(如home.html(放入无名称视图(空字符串(中的视图。

您可能已经注意到，下面的演示显示了一个名为 app 的根状态，这也是一个抽象状态(这意味着您无法在此状态下导航(。它有三个视图，每个视图表示一个名称，该名称对应于index.html中定义的ui-view。

在无名称

视图中，包含具有无名称ui-view的content.html，该将表示app状态的所有子状态。通过执行此操作，如果将这些状态添加到app状态下，则可以共享nav.html和footer.html到所有状态。这方面的一个例子是app.home和app.items状态。要了解更多信息，请阅读我上面添加的链接。

演示

爪哇语

$urlRouterProvider.otherwise('/home');
$stateProvider.state('app', {
  abstract: true,
  views: {
   nav: {
     templateUrl: 'nav.html',
     controller: 'NavController as Nav'
   },
   '': {
     templateUrl: 'content.html',
     controller: 'ContentController as Content'
   },
   footer: {
     templateUrl: 'footer.html',
     controller: 'FooterController as Footer'
   }
  }
})
.state('app.items', {
  url: '/items',
  templateUrl: 'items.html',
  controller: 'ItemsController as Items'
})
.state('app.home', {
  url: '/home',
  templateUrl: 'home.html',
  controller: 'HomeController as Home'
});

.HTML

索引.html

<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>

内容.html

<hr>
<ui-view></ui-view>
<hr>

根据其余路由，您可能可以利用抽象状态来执行此操作：

Angular UI 路由器 - 处于继承状态的视图也可能有助于为您指明正确的方向。

相关文章：