Angular ui -路由器嵌套视图不显示页面

Angular UI-Router Nested View Not Displaying Page

本文关键字：显示 视图 嵌套 ui 路由器 Angular      更新时间：2023-09-26

我在我的应用程序中实现了UI-Router，但我有一个嵌套路由的问题。我的index.html页面看起来像;

<body>
    <!-- Navigation code -->
    <!-- Content from the template -->
    <div ui-view></div>
    <!-- Footer -->
    <!-- Application Scripts -->
</body>

我的Angular ui-route代码是;

(function () {
    'use strict';
    var app = angular.module('rbApp', ['ngAnimate', 'ui.router', 'ui.bootstrap']);
    app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/");
        $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/App/WebSite/home.html",
            controller: "homeController as homeVm"
        })
        .state("programs", {
            url: "/programs",
            templateUrl: "/App/WebSite/programs.html",
            controller: "programsController as programVm"
        })
        .state("programs.complete", {
            url: "/complete",
            templateUrl: "/App/WebSite/programsComplete.html"
        })
        .state("articles", {
            url: "/articles",
            templateUrl: "/App/WebSite/articles.html",
            controller: "articleController as articleVm"
        })
    }]);
    app.run(['$rootScope', function ($rootScope) {
        $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
            console.log('Location change: %s --> %s', oldUrl, newUrl);
        });
    }]);
})();

当我选择"程序"路由时，页面正确显示，上面的"app.run"代码更新控制台日志为;

Location change: http://localhost:50321/#/ --> http://localhost:50321/#/programs

在程序页面上，我有一个锚标记内的图像，如下所示;

    <div class="col-md-3 hidden-sm hidden-xs">
        <a ui-sref="programs.complete"><img class="img-thumbnail img-responsive" src="/Images/Programs/Program01Small.jpg" /></a>
    </div>

单击图像时，显示控制台日志;

Location change: http://localhost:50321/#/programs --> http://localhost:50321/#/programs/complete

所以看起来路由的行为是预期的。唯一的问题是"programsComplete.html"模板没有显示，浏览器继续显示"programs.html"模板。

我已经检查了控制台日志，但没有显示错误，目前"programsComplete.html"只包含一个<h1>标记和文本，所以我可以确认模板正在加载。

谁能告诉为什么这不会加载模板?

似乎父模板 programs.html 只是缺少它的子模板。确保这个模板programs.html包含未命名的视图目标

<div ui-view="">

每个子节点都插入父节点。如果我们想让child代替parent，我们必须使用绝对名称，在这种情况下，目标是index.html，像这样:

.state("programs.complete", {
    url: "/complete",
    views : {
      '@' : {
        templateUrl: "/App/WebSite/programsComplete.html"
       }
    }
})

虽然这个命名约定可能很奇怪: views : { '@' : ... ，它只是绝对名称:

视图名称-相对名称与绝对名称

在幕后，每个视图都被分配了一个绝对名称，遵循viewname@statename的方案，其中viewname是视图指令中使用的名称，statename是状态的绝对名称，例如contact.item。您还可以选择用绝对语法编写视图名。

所以'@'表示未命名状态下的未命名视图===根状态

相关文章：