栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Angular UI Router-具有多种布局的嵌套状态

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Angular UI Router-具有多种布局的嵌套状态

虽然没有显示您的示例的小插曲,但我将与您分享一个示例:有效的布局示例。请观察它,以了解我将在此处尝试解释的内容

如果我们的

root
状态应该是注入到中的唯一根状态
index.html
,那么我们确实需要一些不同的定义:

所以对于index.html

// index.html<body>    <div ui-view="layout">    </div></body>

我们将需要以下语法:

$stateProvider  .state('root', {    url: '',    views: {      'layout': {        templateUrl: 'partials/layout/1-column.html'      },      'header@root': {        templateUrl: 'partials/layout/sections/header.html'      },      'footer@root': {        templateUrl: 'partials/layout/sections/footer.html'      }    }  })

这是

'header@root'
什么 这是绝对的命名。在这里检查:

  • 视图名称-相对名称与绝对名称 (以下小引用)
  • 而在这里我试图expain,在详细

在幕后,每个视图都被分配一个遵循方案的绝对名称

'viewname@statename'

,其中viewname是view指令中使用的名称,状态名称是该状态的绝对名称,例如contact.item。您还可以选择以绝对语法编写视图名称。

其他状态定义也是如此。因为’root.signup’具有直接父级’root’,所以现有语法可以正常工作

.state('root.signup', {    url: '/signup',    views: {      'step-breadcrumb': { // working AS IS      ...

但是我们可以使用绝对命名,它也可以正常工作

.state('root.signup', {    url: '/signup',    views: {      'step-breadcrumb@root': { // absolute naming      ...

因为无论如何这就是它的工作原理。

请查看布局示例以了解更多详细信息



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/436344.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号