Angular ui-router:嵌套视图与多个视图
作者：coco2冰冰 | 2023-09-09 14:29
如何解决《Angularui-router:嵌套视图与多个视图》经验，为你挑选了2个好方法。
ui-router是angular标准路由器的绝佳替代品; 它支持嵌套状态和视图以及多个视图.
但是,由于两者之间的差异,我有点困惑.在我看来,几乎总是可以将多个视图视为"高阶"组件的嵌套视图.例如,如果我们考虑具有侧边栏和内容框的应用程序,我们可以将它们建模为两个"并行"视图,或者将侧边栏设置为父视图,将内部窗格设置为依赖于所选侧边栏项目的嵌套子视图.
自述文件似乎表明这种划分并不是很明确:
专业提示:虽然多个并行视图是一个强大的功能,但您通常可以通过嵌套视图并将这些视图与嵌套状态配对来更有效地管理界面.
什么时候应该使用多个视图和嵌套视图？是否有一些标准可以帮助您选择大部分时间,这是建模状态的正确方法,嵌套与多个？
1> TonyGW..：
在我的理解中,多个视图主要用于布局目的,而嵌套视图用于父子层次视图.使用您提到的案例作为示例:
侧边栏和内容可以安排为两个截然不同的视图:
$stateProvider.state('main', {
abstract: true,
url: '/main', //base url for the app
views: {
'': {
//this serves as a main frame for the multiple views
templateUrl: 'path/to/the/main/frame/template.html'
},
'sideBar@main': {
templateUrl: 'path/to/the/sidebar/template.html'
},
'content@main': {
templateUrl: 'path/to/the/content/template.html'
}
}
});
该path/to/the/main/frame/template.html模板可以包含以下帧:
Header section
然后在sideBar或内容模板中,您可以嵌套他们的子视图子部分.
2> koox00..：
嵌套状态可以与嵌套视图和并行视图一起使用.
只是要注意嵌套状态.
嵌套状态的优点在于您可以轻松地共享/继承父视图到子视图的数据.
例如:
假设您有一些页面需要用户登录.
$stateProvider
.state('admin', {
url: '/admin'
resolve: { authenticate: authenticate }
})
.state('admin.users', {
url: '/users'
})
function authenticate(Auth) {
if (Auth.isLoggedIn()) {
// Resolve the promise successfully
return $q.when();
} else {
$timeout(function() {
// This code runs after the authentication promise has been rejected.
// Go to the log-in page
$state.go('login', {}, {reload:true});
});
// Reject the authentication promise to prevent the state from loading
return $q.reject();
}
现在,作为子管理员状态的每个州都必须通过authenticate服务(即使您直接导航到admin/users/).
所以基本上在决心中你可以放任何东西,所有的子状态都将继承.
对于并行视图,您可以完全控制布局.
@TonyGW的例子很棒
你可以在你的应用程序中同时使用它们,我的意思是嵌套状态和并行视图,你也可以有并行的嵌套视图.这实际上取决于布局布局的结构.
如果您希望子状态出现在父状态的html中,则必须使用嵌套视图.
京公网安备 11010802040832号 | 京ICP备19059560号-6