Angular 2 e TypeScript Promises

Estou a tentar usar a função routerCanDeactivate para um componente da minha aplicação. A maneira simples de usá-lo é a seguinte:

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

O meu único problema com isto é que é feio. Ele só usa um navegador gerado prompt confirmação. Eu realmente quero usar um modal personalizado, como um modal Bootstrap. Eu tenho o Modal Bootstrap retornando um valor verdadeiro ou falso baseado no botão que eles clicam. O routerCanDeactivate que estou a implementar pode aceitar um valor verdadeiro / falso ou uma promessa que se resolve ao verdadeiro/falso.

aqui está o código para o componente que tem o método 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);
        }
    }
}

Quando os meus ficheiros de tipo compilar, recebo os seguintes erros no terminal:

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

Quando tento deixar o componente, o modal começa, mas o componente desactiva-se e não espera que a promessa se resolva.

O meu problema é tentar cumprir a promessa para que o método espere que a promessa seja resolvida. Há alguma razão para haver um erro dizendo que não há propriedade em Promise<boolean>? Se eu puder resolver essa parte, o que devo retornar no método routerCanDeactivate para que ele espere pela resolução/rejeição da promessa?

para referência, aqui está a definição de Promessa definida. Há claramente uma função de determinação e rejeição.

Obrigado pela ajuda.

actualizar

Aqui está o arquivo atualizado, com a promessa sendo inicializada:

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

e o handleResponse função:

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

Ainda não funciona correctamente, mas o modal aparece e espera pela resposta. Quando disseres que sim, sai, fica no componente. Além disso, o primeiro res registado é o valor correcto devolvido do componente, mas o que está dentro da função .then não é o mesmo que o que passou para a função handleResponse.

Mais Actualizações

Depois de fazer mais algumas leituras, parece que, na declaração, resolve valor, e o promise tem esse valor não importa o que aconteça. Então, embora mais tarde eu chame o método .then, ele não muda o valor do promise e eu não posso torná-lo verdadeiro e mudar os componentes. Existe uma maneira de fazer com que o promise não tenha um valor padrão e que tenha que esperar até que o seu método .then seja invocado?

funções actualizadas:

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

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

Obrigado mais uma vez pela ajuda.

Última Actualização

Depois de ver muitas sugestões, Decidi criar uma aula. Tem funcionado muito bem, mas quando eu faço o deferred.reject(anyType), Eu recebo um erro no console de:

EXCEPTION: Error: Uncaught (in promise): null

acontece o mesmo quando passo em null, em string, ou em boolean. Tentar fornecer uma função catch na classe Deferred não funcionou.

Classe Diferida

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