0

我对 Angular 真的很陌生，我正在尝试构建一个导航页面。定义的结构是： 主页上有一个导航到 main-page1.html 的按钮 main-page1.html 包含有 4 个选项卡的菜单栏。main-page1.js 有一个模块和一个状态（父状态）。所有 4 个选项卡都在 tabs.js 文件中，并且有一个模块和 4 个状态（每个状态对应不同的状态）。Tab1 是默认选项卡，并与父 url 链接

问题：我不应该在父状态中使用 abstract: true 。因此，当我到达 main-page.html 时，Tab1 的内容没有呈现。但是，它仅在我单击选项卡一次或两次时才会呈现。这适用于 abstract:true 但不幸的是，由于某种原因，我不能在父状态中使用抽象。有什么解决方法吗？

4

1 回答 1

0

将您的父状态与 abstract:true:

.state('parentState', {
  url: '/yoururl/:yourparam',
  abstract: true,
  views: {
    '@': { templateUrl: 'views/main-page1.html', controller: 'YourCtrl' }
  }
})

在您的子状态（tab1、tab2、tab3、tab4）上，将 url:'' 放在 tab1 上，因为这应该是默认值：

.state('parentState.tab1', {
  url: '',
  views: {
    'tabContent' : { templateUrl: 'views/tab1.html' }
  }
})
.state('parentState.tab2', {
  views: {
    'tabContent' : { templateUrl: 'views/tab2.html' }
  }
})
.state('parentState.tab3', {
  views: {
    'tabContent' : { templateUrl: 'views/tab3.html' }
  }
})
.state('parentState.tab4', {
  views: {
    'tabContent' : { templateUrl: 'views/tab4.html' }
  }
})

在您的 main-page1.html 文件中，创建一个名为 tabContent 的命名视图：

<div ui-view="tabContent"></div>
于 2014-04-09T18:31:53.263 回答