角度ui路由器：父级和子级视图

一尘不染

角度ui路由器：父级和子级视图

angularjs

我想用以下结构构建一个站点header-view，main-view，footer-
view。因此，我定义了一个包含页眉和页脚的根路由。root的子代将是我的全部站点。在这些站点中，我将拥有更多的嵌套视图。

在下面的代码中，它确实显示了页眉，但未显示页脚和主视图。一旦删除父级继承，它将显示主视图，但不显示页眉和页脚。

的HTML

<body ng-app="App">
    <header ui-view="header"></header>
    <main ui-view></ui-view>
    <footer ui-view="footer"></footer>
</body>

   module.config(function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('root', {
          abstract: true,
          views: {
            '@': {
                controller: 'RootCtrl',
                controllerAs: 'rootCtrl'
            },
            'header@': {
                templateUrl: 'modules/header/header.html',
                controller: 'HeaderCtrl',
                controllerAs: 'headerCtrl'
            },
            'footer@': {
                templateUrl: 'modules/footer/footer.html',
                controller: 'FooterCtrl',
                controllerAs: 'footerCtrl'
                }
           }
        })
        .state('root.home',{
            parent:'root',
            url:'',
            templateUrl:'modules/home/home.html',
            controller: 'HomeController',
            controllerAs:'homeCtrl'
        });
    });

阅读 339

2020-07-04

共1个答案

一尘不染

有一个与正在工作的矮人有关的链接。

该UI-Router逻辑如何找到一个视图的目标/锚： 总是试图插入child到parent。如果不可能，请使用绝对命名。看到：

[视图名称-相对名称与绝对名称](https://github.com/angular-ui/ui-router/wiki/Multiple-

Named-Views#view-names—relative-vs-absolute-names)

因此，我更改的是，父未命名视图现在包含子对象的目标/锚点-未命名视图<ui-view />：

.state('root', {
  abstract: true,
  views: {
    '@': {
        template: '<ui-view />', // NEW line, with a target for a child
        controller: 'RootCtrl',
        controllerAs: 'rootCtrl'
    },
    ....

另外，因为我们说过，默认网址是

  $urlRouterProvider.otherwise('/home');

我们必须有这样的状态：

.state('root.home',{
    parent:'root',
    url:'/home', // this is the otherwise, to have something on a start up

在这里检查

此处使用unk子的另一种方法可能是针对子级的根视图：

.state('root.home',{
    parent:'root',
    url:'/home',
    views: {
      '@': {
      templateUrl:'home.html',
      controller: 'HomeController',
      controllerAs:'homeCtrl'
      }
    },

在这种情况下，父状态不是必须的<ui-view />-我们以root 为目标，但我们不会继承任何东西…为什么呢？看到这个链接：

[仅按视图层次结构的作用域继承](https://github.com/angular-ui/ui-router/wiki/Nested-

States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only)

2020-07-04