我如何在打字稿构造函数之外正确使用 angular $timeout 服务？

Question

我正在尝试弄清楚如何通过 TypeScript 正确使用 angular $timeout 服务 - 这样我就可以在某人例如点击 "Log In"-按钮。

interface INavigationController {
        username: string;
        password: string;
        loggedIn: boolean;
        ready: boolean;
        signIn(): void;
        signOut(): void;
    }

    class NavigationController implements INavigationController {
        username: string;
        password: string;
        loggedIn: boolean;
        ready: boolean;

        static $inject = ['$timeout'];
        constructor(private $timeout: ng.ITimeoutService) {
            var vm = this;
            vm.username = this.username;
            vm.password = this.password;
            vm.ready = true;

            // The line below work just fine from within here - but i want the behavior
            // when someone clicks a button, not directly like this.
            // Remove vm.ready = true above, before...
            //$timeout(function () { vm.ready = true;}, 2200);}

        signIn() {
            if (!this.username || !this.password) {
                alert("You need to frickin enter som details, man!");
            } else {
                this.ready = false;
                this.$timeout(function () {
                    this.ready = true;
                }, 2200);
            }
        }

我也尝试将 invokeApply?:boolean 设置为 true:

this.$timeout(function () {
    this.ready = true;
}, 2200, true);

- 没有任何成功...

如果我在 this.$timeout(function()... 中 console.log(this.ready); 它会在 2200 毫秒后显示 true，但似乎 $apply() 不适用？

如果有人能告诉我如何正确使用 $timeout 和其他类似服务，我将不胜感激 - 最好使用我的目标风格指南，即使用 "controllerAs with vm" - John Papa

Answer 1

this.$timeout(()=> {
                this.ready = true;
            }, 2200);

如果您使用 function(){} 模式，您将无法访问 this（this 不是您期望的那个）

Answer 2

timeout里面的'this'就是timeout函数的this。您需要在外部定义一个变量来引用该范围（通常称为'that'）并在超时内引用它：

var that = this;
$timeout(function() {
     that.value ='eggs';
}, 2200);

Answer 3

试试这个，伙计

var obj = this;
this.$timeout(function () {
  obj.ready = true;
  }, 2200);

我如何在打字稿构造函数之外正确使用 angular $timeout 服务？

How do i correctly use angular $timeout service outside of a typescript constructor?

angularjs

typescript