Question

我知道如何将UI-Router用于添加路由和子路由的级别，例如在我的网站上我有一系列邮件服务：，如http://localhost:3001/#/partners/usps其中＆＃34; usps＆＃ 34;是合作伙伴。这是使用：

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

我现在要做的是，此合作伙伴USPS的不同部分的网址低于此级别，例如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'
  }
})

这是什么语法/方法？

Answer 1

不确定哪个部分没有按预期工作 - 所以我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'我也使用一个模板作为孩子的目标：

这是 templateUrl：＆＃39; modules / partners / templates / partner.usps.html＆＃39;， - 检查其根元素的属性

 <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>

因此，孩子将完全替换此内容

检查here

注意：我们可以扩展父项，而不是替换，例如

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

延伸：

不确定真正的要求是什么，但是我扩展了那个掠夺者。

让我们说我们需要能够导航到这样的链接：

<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

最后，我创建了一个带有扩展版本的内联plunker，可以在这里访问：

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

我们可以测试任何param可以在url中传递：#/partners/usps/what-ever-we-want

嵌套状态在Angular UI-Router中降低2级？

1 个答案: