Angular UI-路由器中的嵌套状态向下 2 层?

Nested states 2 levels down in Angular UI-Router?

我知道如何使用 UI-Router 来添加路由和子路由,例如在我的站点上我有一系列邮件服务:,如 http://localhost:3001/#/partners/usps 中"usps" 是合作伙伴。这是使用:

 .state('partners.usps', {
  url: '/usps',
  templateUrl: 'modules/partners/templates/partner.usps.html',
  controller: 'PartnerCarrierCtrl as carrier',
  data: {
    pageTitle: 'USPS',
    access: 'public'
  }
})

我现在想做的是为该合作伙伴 USPS 的不同部分设置低于此级别的 URL,例如 http://localhost:3001/#/partners/usps/labels,但我找不到这方面的信息。

有效:

  .state('partners.usps.indicia', {
  url: '/indicia',
  templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
  controller: 'PartnerCarrierCtrl as carrier',
  data: {
    pageTitle: 'USPS',
    access: 'public'
  }
})

这个 syntax/method 是什么?

不确定,哪个部分没有按预期工作 - 所以我 created working plunker

状态不变:

  .state('partners', {
    url: '/partners',
    template: '<div ui-view=""></div>',
  })
  .state('partners.usps', {

      url: '/usps',
      templateUrl: 'modules/partners/templates/partner.usps.html',
      controller: 'PartnerCarrierCtrl as carrier',
      data: {
        pageTitle: 'USPS',
        access: 'public'
      }
  })

  .state('partners.usps.indicia', {
    url: '/indicia',
    templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
    controller: 'PartnerCarrierCtrl as carrier',
    data: {
      pageTitle: 'USPS',
      access: 'public'
    }
  })

对于一个状态 'partners.usps',我使用一个模板作为 child 的目标:

这是 templateUrl:'modules/partners/templates/partner.usps.html', - 检查其根元素上的属性

 <div ui-view>
  <h3>current state name: <b> partners.usps</b></h3>

  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>

 </div>

因此,child 将完全替换此内容

检查一下here

注意:我们可以只扩展 parent,而不是替换,例如

 <div>
  <h3>current state name: <b> partners.usps</b></h3>
  <div ui-view=""></div>

延长:

不确定真正的要求是什么,但我扩展了 plunker。

假设我们需要能够导航到如下链接:

<a href="#/partners/usps">
<a href="#/partners/usps/indicia">
<a href="#/partners/usps/label">
<a href="#/partners/usps/any">
<a href="#/partners/usps/other">

这样就可以了

// this is a special state INDICIA
// if needed, it could do some special stuff
  .state('partners.usps.indicia', {
    url: '/indicia',
    templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
    controller: 'PartnerCarrierCtrl as carrier',
    data: {
      pageTitle: 'USPS',
      access: 'public'
    }
  })

// this will handle any other params, passed 
// as a child
  .state('partners.usps.child', {
    url: '/:paramName',
    templateUrl: 'modules/partners/templates/partner.usps.indicia.html',
    controller: 'PartnerCarrierCtrl as carrier',
    data: {
      pageTitle: 'USPS',
      access: 'public'
    }
  })

检查一下here

最后,我创建了一个带有扩展版本的内联插件,可以在这里访问:

http://run.plnkr.co/plunks/b5nGpGKcGtQNuIbIgxPD#/partners/usps/other111

我们可以测试任何参数都可以在 url 中传递:#/partners/usps/what-ever-we-want