Question

假设我有以下简化的控制器：

module App {
    "use strict";

    export class StoreDetailController {
        constructor() {
            alert("Detail-Controller");
        }
    }
}

UI-Router配置如下（简化）：

var app = angular.module("app", ["ui.router"])
    .config(($stateProvider, $locationProvider, $urlRouterProvider) => {
        $urlRouterProvider.otherwise("/");
        $stateProvider.state("store", {
            url: "/Store",
            templateUrl: "/Store/Partial?name=Layout"
        });
        $stateProvider.state("store.Detail", {
            url: "/Details/:id",
            templateUrl: "/Store/Partial?name=Details",
            controller: StoreDetailController
        });
        $locationProvider.html5Mode(true);
    });

当我从应用程序的起始页面进入详细信息页面时，

一切正常（出现消息框）。但是，如果我在详细信息页面上重新加载浏览器或将嵌套的URL粘贴到新选项卡中，则不会调用控制器并且不会引发错误。

如果我直接在配置中声明'控制器，那么一切似乎都有效：

//...
$stateProvider.state("store.Detail", {
    url: "/Details/:id",
    templateUrl: "/Store/Partial?name=Details",
    controller: () => alert("This is called every time");
});
//...

在重新加载或输入嵌套网址时配置控制器的状态提供程序的正确方法是什么？

Answer 1

在这种情况下，最可疑的，主要是罪魁祸首，是不正确的HTML设置。

只需浏览器需要知道所有相对导航的基础 href是什么。如果我们直接导航到https://domain/app/Store/Partial?name=Layout，这可能会让它感到困惑（对于浏览器）。要解决它，我们只需要设置元素<base>

<base href="/" />

使用工作示例/ plunker

检查此Q & A about html5mode

有趣的是，Angular的$ htmlProvider还有其他方式，它是配置：

$locationProvider.html5Mode({
   enable: true,
   requireBase: false.
});

检查文档：

$locationProvider

关于配置的小引用：

已启用 - {boolean} - （默认值：false）如果为true，则依赖history.pushState更改支持的网址。将回退到不支持pushState的浏览器中的哈希前缀路径。

requireBase - {boolean} - （默认值：true）启用html5Mode时，指定是否需要存在标记。如果enabled和requireBase为true，并且不存在基本标记，则在注入$ location时将引发错误。有关详细信息，请参阅$ location指南

rewriteLinks - {boolean} - （默认值：true）启用html5Mode时，启用/禁用相对链接的URL重写。

如何使用TypeScript为stateprovider配置控制器

1 个答案:

$locationProvider