Angular嵌套视图无法工作

angular nested views not working

本文关键字：工作 视图 嵌套 Angular      更新时间：2023-09-26

我想构建一个电子邮件客户端应用程序，其中用户将首先看到一个登录面板，然后将被重定向到主视图与其他几个视图里面。如收到的电子邮件，删除，垃圾邮件等。为了做到这一点，我使用了ui-router和嵌套视图，我的配置代码看起来像这样:

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('/',{
    url: '/login',
    templateUrl: 'views/login.html',
    controller: 'loginCTRL'
})
.state('main',{
    url: '/main',
    templateUrl: 'views/mainView.html',
    controller: 'MailCtrl'
}),
.state('main.received', {
    url: '/received',
    templateUrl: '/views/received.html' ,
    controller: 'receivedCTRL'
     })
     })
.state('main.spam', {
    url: '/spam',
    templateUrl: '/views/spam.html',
    controller: 'spamCTRL' 
     })
.state('main.removed', {
    url: '/removed',
    templateUrl: '/views/removed.html',
    controller: 'removedCTRL' 
     })
.state('main.message', {
    url: '/message',
    templateUrl: '/views/FullMessage.html',
    controller: 'MailCtrl' 
     }) });

但不是显示所有嵌套的视图在我的电子邮件面板它发送我回到登录视图。所有路径都是正确的。

确保main状态中使用的模板有一个未命名的ui-view。比如:

<div ui-view></div>

父状态至少需要1个ui-view才能让它的子状态填充(除非你使用一些非常高级的配置)

使用ui-router时，使用$state代替$location。$state是用于在状态之间导航的服务，可以与状态名称一起使用。

在你的loginCtrl中尝试将$location.path更改为$state.go('main')(记住在控制器的参数中包含$state的依赖关系)

另外，在HTML中创建链接时，请按照Judson Terrell的建议使用ui-sref="state_name"。

通常当ui-router重定向到默认URL时，这是因为它找不到提供的URL的状态。使用这种方法，您可以确保提供给浏览器的URL与为您的状态配置的URL相同。

如果这不起作用，请尝试注释$urlRouterProvider.otherwise行以避免重定向。

也许这就是问题所在?你要这个吗?

$stateProvider
    .state("otherwise", { url : '/login'})

我也假设你是这样链接的…

<a ui-sref="mystate">Go To My State</a>
相关文章：