Angular2アプリケーションでCanDeactivateでモーダル確認を表示する方法は？

Question

私はAngular2アプリケーションを持っています。そのコンポーネントの1つは、CanDeactivateインターフェイスを実装して、ページから離れたユーザーのナビゲーションを確認します。ここでは、ルートガードの実装です：

export class DeactivateGuard implements CanDeactivate<MyComponent> { 
    canDeactivate(component: MyComponent) { 
    let can = component.canDeactivate(); 
    return can; 
    } 
} 

そしてここでは、コンポーネントのコードは次のとおりです。

今

canDeactivate() { 
if (confirm("Are you sure you want to navigate away?")) {  
    return true; 
} 
else { 
    return false; 
} 
} 

、私の代わりに、ブラウザの確認ボックスのカスタムモーダルウィンドウを表示したいです。私は、Telerikの剣道UIで、このようなウィンドウを構築しています：

<kendo-dialog title="Please confirm" *ngIf="userConfirm"> 
    Are you sure you want to navigate away? 
    <kendo-dialog-actions> 
     <button kendoButton class="k-button" (click)="closeConfirm('no')">No</button> 
     <button kendoButton class="k-button" (click)="closeConfirm('yes')" primary="true">Yes</button> 
    </kendo-dialog-actions> 
</kendo-dialog> 

私はどこかのコードでuserConfirm =真を設定した場合は、このモーダルウィンドウはcanDeactivateで（）メソッドを除き、動作します。

canDeactivate() { 
this.userConfirm = true; //Does not work. The modal does not show up. 
} 

このモーダルウィンドウを使用してユーザーの入力を取得するにはどうすればよいですか？

ありがとうございます。

Answer 1

私は剣道がどのように動作するかわからないが、ちょうど確認を使用している場合（）あなたはそうのようなあなたのcanDeactivate（）関数内の関数を返します：

canDeactivate() { 
    return confirm("Are you sure you want to navigate away?"); 
} 

あなたは（）here canDeactivateについての詳細を読むことができます。

Answer 2

あなたの認証ガードからcomponent.canDeactivate();を実行すると、スコープが失われていると思います。これを代わりに試してください：

export class DeactivateGuard implements CanDeactivate<MyComponent> { 
    canDeactivate(component: MyComponent) { 
    return (() => component.canDeactivate())(); 
    } 
}