子路由不触发

本文介绍了子路由不触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建这个路线系统

var app = angular.module('plunker', ['ui.router']);app.config(function ($stateProvider, $urlRouterProvider) {$urlRouterProvider.when('/admin', '/admin/dashboard').when('/user', '/user/dashboard').otherwise('/admin/dashboard');$stateProvider.state('管理员', {网址:'/管理员/仪表板'，解决: {测试:函数(){console.log('叫管理员');返回;}},意见:{'导航': {模板:'<div>管理导航.转到 <a ui-sref="admin.link1">link1</a></div>'},'内容': {模板:'<div>管理仪表板</div>'}}}).state('admin.link1', {//由于某种原因 admin.link1 不起作用但只是 link1 是可以的url: '/admin/link1',解决: {测试:函数(){console.log('admin.link1 调用了 resolve');返回;}},意见:{'导航': {模板:'<div>管理导航</div>'},'内容': {模板:'<div>admin link1</div>'}}}).state('用户', {url: '/用户/仪表板',意见:{'导航': {模板:'<div>用户导航</div>'},'内容': {模板:'<div>用户仪表板</div>'}}});});

HTML 将包含 navigation 和 content ui-view

我想点击 link1 并转到 admin.link1 状态，但不知何故不起作用.

但如果我删除 admin 父级并仅使用 link1，它工作正常.

代码:http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview

预览:http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview

有什么线索吗?

解决方案

你就快到了，更新的 plunker.嵌套视图只有一项更改附加了符号 '@':

.state('admin.link1', {url: '/admin/link1',解决: {测试:函数(){console.log('admin.link1 调用了 resolve');返回;}},意见:{//而不是这个//'导航': {//我们必须在末尾使用@ 使用绝对名称'导航@': {模板:'<div>管理导航</div>'},//这是在父视图中搜索的//'内容': {//这是针对根'内容@': {模板:'<div>admin link1</div>'}}})

该点隐藏在绝对视图命名，摘录:

在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.

工作示例此处或其他这里

请尝试阅读此答案，我尝试深入描述视图命名的含义.(搜索最后一个部分:EXTEND:给出评论的答案)

I am building this route system

var app = angular.module('plunker', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    .state('admin', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      views: {
        'navigation': {
          template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
        },
        'content': {
          template: '<div>admin dashboard</div>'
        }
      }
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      views: {
        'navigation': {
          template: '<div>admin navigation</div>'
        },
        'content': {
          template: '<div>admin link1</div>'
        }
      }
    })
    .state('user', {
      url: '/user/dashboard',
      views: {
        'navigation': {
          template: '<div>user navigation</div>'
        },
        'content': {
          template: '<div>user dashboard</div>'
        }
      }
    });
});

The HTML will have navigation and content ui-view in it

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
  </body>

I want to click on link1 and go to admin.link1 state but somehow that is not working.

But if I remove the admin parent and use link1 only, it works fine.

Code: http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview

Preview: http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview

Any clue?

解决方案

You were almost there, the updated plunker. There is only one change the nested views do have appended sign '@':

.state('admin.link1', {
  url: '/admin/link1',
  resolve: {
    test: function() {
      console.log('admin.link1 called resolve');
      return;
    }
  },
  views: {
    // instead of this
    // 'navigation': {
    // we have to use absolute name with the @ at the end
    'navigation@': {
      template: '<div>admin navigation</div>'
    },
    // this is searched in parent view
    // 'content': {
    // this is targting the root
    'content@': {
      template: '<div>admin link1</div>'
    }
  }
})

The point is hidden in the absolut view naming, an extract:

The working example(s) here or other here

Please, try to read this answer, where I tried deeply describe what is the view naming about.(search for a last section: EXTEND: to give THE answer to a comment)

这篇关于子路由不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！