typescript - Angular 2 和 TypeScript promise

Question

我正在尝试使用 routerCanDeactivate我的应用程序中组件的功能。简单的使用方法如下:

routerCanDeactivate() {
    return confirm('Are you sure you want to leave this screen?');
}

我唯一的问题是它很丑。它只是使用浏览器生成的确认提示。我真的很想使用自定义模式，例如 Bootstrap 模式。我让 Bootstrap 模式根据他们单击的按钮返回真值或假值。 routerCanDeactivate我正在实现可以接受真/假值或解析为真/假的 promise 。

这是具有 routerCanDeactivate 的组件的代码方法:

export class MyComponent implements CanDeactivate {
    private promise: Promise<boolean>;

    routerCanDeactivate() {
        $('#modal').modal('show');
        return this.promise;
    }

    handleRespone(res: boolean) {
        if(res) {
            this.promise.resolve(res);
        } else {
            this.promise.reject(res);
        }
    }
}

当我的 TypeScript 文件编译时，我在终端中收到以下错误:

error TS2339: Property 'resolve' does not exist on type 'Promise<boolean>'.
error TS2339: Property 'reject' does not exist on type 'Promise<boolean>'.

当我尝试离开组件时，模式启动，但随后组件停用并且不等待 promise 解析。

我的问题是尝试计算出 Promise，以便 routerCanDeactivate方法等待 promise 解决。有没有错误说没有'resolve'的原因？属性(property) Promise<boolean> ？如果我能解决那部分问题，我必须在 routerCanDeactivate 中返回什么？方法，以便它等待 promise 的解决/拒绝？

供引用，here is the DefinitelyTyped Promise definition .那里显然有解决和拒绝功能。

感谢您的帮助。

更新

这是更新后的文件，其中初始化了 Promise:

private promise: Promise<boolean> = new Promise(
    ( resolve: (res: boolean)=> void, reject: (res: boolean)=> void) => {
        const res: boolean = false;
        resolve(res);
    }
);

和 handleResponse功能:

handleResponse(res: boolean) {
    console.log('res: ', res);
    this.promise.then(res => {
        console.log('res: ', res);
    });
}

它仍然不能正常工作，但模式出现并等待响应。当你说是离开时，它会留在组件上。另外，第一个 res记录的是组件返回的正确值，但内部的值是 .then函数与传递给 handleResponse 的函数不同功能。

更多更新

在做了更多阅读之后，似乎在 promise 中声明，它设置了 resolve值，以及 promise无论如何都有那个值(value)。所以即使后来我调用.then方法，它不会改变 promise 的值而且我不能让它成为现实并切换组件。有没有办法制作promise没有默认值，它必须等到它的 .then方法被调用？

更新的功能:

private promise: Promise<boolean> = new Promise((resolve, reject) => resolve(false) );

handleResponse(res: any) {
    this.promise.then(val => {
        val = res;
    });
}

再次感谢您的帮助。

最后更新

看了很多建议后，我决定创建一个 Deferred类(class)。它工作得很好，但是当我执行 deferred.reject(anyType) 时，我在以下控制台中收到错误:

EXCEPTION: Error: Uncaught (in promise): null

当我传入 null 时，同样的事情发生了, 一个 string , 或 boolean .试图提供 catch Deferred 中的函数类(class)不成功。

延迟类(class)

export class Deferred<T> {
    promise: Promise<T>;
    resolve: (value?: T | PromiseLike<T>) => void;
    reject:  (reason?: any) => void;

    constructor() {
        this.promise = new Promise<T>((resolve, reject) => {
            this.resolve = resolve;
            this.reject  = reject;
        });
    }
}

Answer 1

我不熟悉 bootstrap modal api，但我希望有一种方法可以在创建它时以某种方式绑定(bind)到关闭事件。

export class MyComponent implements CanDeactivate {

  routerCanDeactivate(): Promise<boolean> {
    let $modal = $('#modal').modal();
    return new Promise<boolean>((resolve, reject) => {
      $modal.on("hidden.bs.modal", result => {
        resolve(result.ok);
      });
      $modal.modal("show");
    });
  }

}

您正在尝试使用 Promise，例如 Deferred。如果您想要那种 API，请自己编写一个 Deferred 类。

class Deferred<T> {

  promise: Promise<T>;
  resolve: (value?: T | PromiseLike<T>) => void;
  reject:  (reason?: any) => void;

  constructor() {
    this.promise = new Promise<T>((resolve, reject) => {
      this.resolve = resolve;
      this.reject  = reject;
    });
  }
}

export class MyComponent implements CanDeactivate {

    private deferred = new Deferred<boolean>();

    routerCanDeactivate(): Promise<boolean> {
        $("#modal").modal("show");
        return this.deferred.promise;
    }

    handleRespone(res: boolean): void {
        if (res) {
            this.deferred.resolve(res);
        } else {
            this.deferred.reject(res);
        }
    }
}