如何配置控制器与打字稿stateprovider(How to configure controll

2019-10-21 18:37发布

假设我有以下简单的控制器:

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);
    });

当我从应用的开始页面中输入详细信息页面一切正常(出现消息框)。 但是,如果我重新加载详细信息页面上的浏览器或粘贴嵌套链接到一个新的选项卡,控制器没有被调用,并不会引发错误。

一切似乎如果我在配置直接“声明”控制,就像工作过:

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

什么是配置控制器上的重载或进入嵌套的URL中使用的状态提供了正确的方法是什么?

Answer 1:

在这种情况下,最可疑的,而且大多的罪魁祸首,是inproper HTML设置。

一个简单的浏览器需要知道,什么是基本 href所有相对导航。 这可能会造成混乱它(用于浏览器),如果我们直接导航到https://domain/app/Store/Partial?name=Layout 。 为了解决它,我们只需要设置元素<base>

<base href="/" />

检查这个Q&A约html5mode ,与工作示例/ plunker

有趣的是还有对角的$ htmlProvider别的办法了,这是它的配置:

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

检查文档:

$ locationProvider

小引用有关配置:

  • 启用 - {}布尔- (默认:false)如果为真,将依靠history.pushState以变更网址,在那里的支持。 将回落到哈希前缀的路径中不支持pushState的浏览器。
  • requireBase - {布尔} - (默认值:真)当html5Mode被启用,指定标签是否被需要存在。 如果启用,requireBase是真实的,并且基本标记不存在,当$位置注入错误将被抛出。 更多信息请参见在$位置导游
  • rewriteLinks - {}布尔- (默认值:true)启用html5Mode,启用/禁用URL重写为相对链接。


文章来源: How to configure controllers for stateprovider with TypeScript