如何使用 TypeScript 为 stateprovider 配置控制器 [英] How to configure controllers for stateprovider with TypeScript

问题描述

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

Let's assume I have following simplified controller:

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 粘贴到新选项卡中，则不会调用控制器，也不会引发错误.

Everything is working fine (the message box appears) when I enter the details page from the start page of the app. But if I am reloading the browser on the details page or paste the nested url into a new tab, the controller is not been called and no error is raised.

如果我直接在配置中声明"控制器，一切似乎也能正常工作，例如:

Everything seems to work too if I 'declare' the controller directly at the configuration, like:

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

配置控制器用于重新加载或输入嵌套 url 的状态提供程序的正确方法是什么?

What is the correct way to configure the state provider that the controller is used on reload or entering nested urls?

推荐答案

在这种情况下，最令人怀疑的，也是罪魁祸首是不正确的 HTML 设置.

In this case, the most suspected, and mostly the culprit, would be inproper HTML setting.

浏览器只需要知道所有相对导航的基础 href 是什么.如果我们直接导航到 https://domain/app/Store/Partial?name=Layout，这可能会令人困惑(对于浏览器).为了解决这个问题，我们只需要设置元素

Simply a browser needs to know, what is the base href for all relative navigation. And that could be confusing for it (for the browser) if we navigate directly to https://domain/app/Store/Partial?name=Layout. To solve it we just need to set the element <base>

<base href="/" />

检查这个Q &关于 html5mode，带有工作示例/plunker

Check this Q & A about html5mode, with working example/plunker

有趣的是，Angular 的 $htmlProvider 也有其他方式，就是它的配置:

Interestingly there is also other way for Angular's $htmlProvider, and it is it configuration:

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

检查文档:

关于配置的小引用:

• enabled – {boolean} –(默认值:false)如果为 true，将依赖 history.pushState 来更改支持的 url.在不支持 pushState 的浏览器中将回退到以哈希为前缀的路径.
• requireBase - {boolean} - (默认值:true)启用 html5Mode 时，指定是否需要存在标签.如果 enabled 和 requireBase 为 true，并且不存在 base 标记，则注入 $location 时将抛出错误.有关详细信息，请参阅 $location 指南
• rewriteLinks - {boolean} - (默认值:true)启用 html5Mode 时，启用/禁用相对链接的 url 重写.

• enabled – {boolean} – (default: false) If true, will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState.
• requireBase - {boolean} - (default: true) When html5Mode is enabled, specifies whether or not a tag is required to be present. If enabled and requireBase are true, and a base tag is not present, an error will be thrown when $location is injected. See the $location guide for more information
• rewriteLinks - {boolean} - (default: true) When html5Mode is enabled, enables/disables url rewriting for relative links.

这篇关于如何使用 TypeScript 为 stateprovider 配置控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！