CanDeactivate確認消息

我已經實現了一個CanDeactivate後衛，以避免用戶在上傳時離開頁面和它的作品。問題在於我的信息始終是默認信息（因爲瀏覽器語言，因此在荷蘭語中），甚至自己設置信息，仍然顯示相同的默認窗口confirm。我想我自己寫的消息（其實我有我要顯示一個模式，但首先我想看看我的簡單的信息只是工作）CanDeactivate確認消息

任何想法可能是什麼？我錯過了什麼嗎？在此先感謝！

這裏的代碼

衛隊。

import { Injectable, ViewContainerRef } from '@angular/core'; 
    import { CanDeactivate } from '@angular/router'; 
    import { Observable } from 'rxjs/Observable'; 
    import { DialogService } from '../services'; 

    export interface PendingUpload { 
     canDeactivate:() => boolean | Observable<boolean>; 
    } 
    @Injectable() 
    export class PendingUploadGuard implements CanDeactivate<PendingUpload> { 
     constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { } 

     canDeactivate(component: PendingUpload): boolean | Observable<boolean> { 

      return component.canDeactivate() 
       ? true 
       : confirm("Test custom message"); 

       //dialog I want to use later 
       //this.dialogService.confirm("modal title", "modal body", this.viewContainerRef);     
     } 
    }

組件

import { Component, OnInit, HostListener } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 

import { PendingUpload } from '../../shared/validators/pending-upload.guard'; 

import './../../rxjs-operators'; 

@Component({ 
    selector: 'component-selector', 
    templateUrl: './html', 
    styleUrls: ['./css'] 
}) 
export class ScannerUploadComponent implements OnInit, PendingUpload { 
    uploading: boolean = false; 

    constructor() { } 

    ngOnInit() { 
     this.uploading = false; 
    } 

    @HostListener('window:beforeunload') 
    canDeactivate(): Observable<boolean> | boolean { 
     return !this.uploading; 
    } 
}

來源

2017-02-09 Elmer Dantas

埃爾默發現安德斯這個問題在這裏：角2 - 離開頁面之前警告的未保存的更改用戶]（http://stackoverflow.com/questions/35922071/angular-2-warn-user-of-unsaved-我已經看到了這一點，仍然改變前方的離開頁/） –

給了我一個默認的消息文本（在荷蘭），而不是我的自定義消息....我使用指定的保護從角文檔和工作，但有一個bug像[this]（https://github.com/angular/angular/issues/10321）..我很努力地完成這項工作，但直到現在還沒有成功。 –

試圖瀏覽您的角度應用內其他地方時（例如，從導航到http://localhost:4200/#/test1 http://localhost:4200/#/test2）將只顯示您的自定義消息。這是因爲CanDeactivate防護程序僅在您的Angular應用程序中激活通過Angular路由器進行的路線更改。

當從角應用導航離開（例如，從導航到http://localhost:4200/#/test1 http://stackoverflow.com，刷新頁面，關閉瀏覽器窗口/標籤等）時，windowbeforeunload事件激活（由於@HostListener('window:beforeunload')註釋）和自己處理confirm對話框，而不需要CanDeactivate後衛。在這種情況下，Chrome和Firefox會顯示自己的待處理更改警告消息。

你可以閱讀更多有關beforeunload事件，它是如何工作here。你會在「注意事項」一節中注意到它規定如下：

在Firefox 4及更高版本返回的字符串不會顯示給用戶。相反，Firefox會顯示字符串「此頁面要求您確認您要離開 - 您輸入的數據可能無法保存。」

Chrome遵循類似的模式，解釋爲here。

IE /邊緣似乎仍然提供指定自定義beforeunload消息的能力。這個例子可以看到here。

來源

2017-02-13 15:11:13 stewdebaker

感謝您的回答，燉！我已經閱讀過關於beforeunload事件，並且看到使用它時無法自定義消息。我認爲我做錯了一件事，因爲在你的回答中（從你發佈的鏈接中），沒有一件是這樣提到的......我試圖做不可能的=]。至少現在我知道我正走在正確的道路上。再次感謝。 –

@ElmerDantas - 沒問題。我現在更新了對另一個問題的回答，以說明這種區別。對困惑感到抱歉。 – stewdebaker

CanDeactivate確認消息

回答

相關問題