带有多个参数的ui-sref子视图不起作用 [英] ui-sref with multiple parameters to child view not working

问题描述

我在我的应用程序上使用 Angular 的 ui-router 来尝试路由到主视图的子视图.main 和 child 都有自己的关联 ID.目前我可以导航到父母，但我与孩子的链接不起作用.

I'm using Angular's ui-router on my application to try and route to child views of a main view. Both the main and the child have their own associated IDs. Currently I can navigate to the parent, but my link to the child is not working.

在我的 Application.js 中

In my Application.js

$stateProvider

//Working Route
.state('Project', {
    url: '/Project/{projectId}',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectMainContent.html", 
            controller: function ($stateParams) {
                console.log("Project state hit!"); 
            }
         },
        ...
    }
})

//Non-Working Route
.state('Project.ViewResource', {
    url: '/Resource/:resourceId',
    parent: 'Project',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectResourceViewContent.html" 
            controller: function ($stateParams) {
                console.log("Project.ViewResource state hit!"); 
            }
        },
        ...
    }
});

在我的 HTML 中:

In my HTML:

<!-- Working Link-->
<a ui-sref="Project({ projectId: 5 })"><h3>   My Projects </h3></a>

<!-- Non-working Links -->
<a ui-sref="Project.ViewResource({ projectId: 5, resourceId: 3 })">View Project Resource. </a>
<a ui-sref="Project.ViewResource({ resourceId: 3})">I'm a Resource Image. </a>

第一个链接有效，但是当我单击任一非工作"子链接时，我的浏览器会更新为:Home/Index/#/Project/5/Resource/3"，这是所需的路线，但是页面内容

The first link works, however when I click either of the "non-working" child links my browser updates to: "Home/Index/#/Project/5/Resource/3" which is the desired route, however the page content

知道我哪里出错了吗?

Edit1:在views"对象中添加应该被换出的代码行.

Edit1: To add the lines of code in the 'views' object which should be swapping out.

Edit2:为了进一步说明问题，我添加了控制器代码块.当我点击第一个 html 链接时，我的控制台输出项目状态命中！"当我单击任一非工作链接时，控制台没有新输出.即，路线可能没有被击中.

To further demonstrate the issue, I've added the controller code blocks. When I hit the first html link, my console outputs "Project state hit!" When I click either of the non-working links, there is no new output to the console. Ie, the route is likely not being hit.

推荐答案

弄清楚发生了什么.在仔细查看了这里的多个命名视图的文档后，我意识到我的子视图正在 parent 模板中搜索 ui-view 标签，而不是 root 模板.本质上，我的孩子试图嵌套在我的父级中，而我想要的行为是替换父级视图.

Figured out what was happening. After taking a closer look at the document on multiple named views here, I realized that my child view was searching for ui-view tags within the parent template, rather than the root template. Essentially, my child was trying to nest within my parent, while my desired behavior was to replace the parent views.

因此，要在根目录中定位 ui-views，我的解决方案如下所示:

So, to target ui-views within the root, my solution looked like:

.state('Project.Resource', {
    url: '/Resource/{resourceId}',
    parent: 'Project',
    views: {
        "MainControls@":   { templateUrl: "/Scripts/Dashboard/templates/MainControls/MainControls.html" },
        "ContentMain@": {
            ...
         },
         ...
     }
})

这篇关于带有多个参数的ui-sref子视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！