Angularjs 如何实现嵌套状态（使用命名视图），而不在父级中使用抽象

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

问题：我不想在父状态中使用摘要：true。因此，当我访问main-page.html时，Tab1的内容不会呈现。 但是，它仅在我单击选项卡一次或两次时渲染。

---

这适用于abstract:true，但不幸的是，由于某些原因，我无法在父状态中使用abstract。有什么解决方法吗？

将您的父状态设置为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>