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

Question

我正在尝试弄清楚如何正确使用带有 TypeScript 的角度 $timeout 服务 - 这样当有人单击“登录”按钮时，我可以显示类似闪屏的行为。

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