我每天都看到一些應用程序有一個功能，當你在一個頁面上，你正在填寫，例如，一個表格，當你嘗試點擊其他地方，例如在導航菜單中，甚至離開頁面時，你有不安全的改變他們詢問用戶是否想離開頁面，如果有人可以向我提供一個如何在 Angular 中實現(xiàn)的示例，我將不勝感激，我不確定這是我正在使用的后端中的前端還是后端作業(yè)爪哇。非常感謝，每個想法都很重要：D。
2 回答
慕萊塢森
TA貢獻1810條經(jīng)驗 獲得超4個贊
canDeactivate您可以為每個組件使用guard，
首先你必須添加這個服務文件“deactivate-guard.service.ts”：
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class DeactivateGuardService implements CanDeactivate<CanComponentDeactivate>{
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
那么你必須在應用程序模塊中提供：
providers: [
DeactivateGuardService
]
現(xiàn)在在您要保護的組件中，添加功能：
export class ExampleComponent {
loading: boolean = false;
@ViewChild('exampleForm') exampleForm: NgForm;
canDeactivate(): Observable<boolean> | boolean {
if (this.loading|| this.exampleForm.dirty) {
return this.confirmBox('Discard Unsaved Changes?');
}
return true;
}
confirmBox(message?: string): Observable<boolean> {
const confirmation = window.confirm(message || 'Are you sure?');
return of(confirmation);
};
}
將指令添加到路由模塊中的組件：
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'example',
canDeactivate: [DeactivateGuardService],
component: ExampleComponent
}
])
]
哆啦的時光機
TA貢獻1779條經(jīng)驗 獲得超6個贊
您可以使用 canDeactivate 守衛(wèi)檢查頁面離開并顯示您希望顯示類似內(nèi)容的警告消息
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>{
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
包括設置可以激活守衛(wèi)到這樣的路線
{ path: 'sample-path', component: SampleComponent, canDeactivate: [CanDeactivateGuard] },
和組件的 canDeactivate 方法
canDeactivate() {
if (this.formIsIncomplete > 0) {
let result: boolean = window.confirm("You have unsaved Changes");
return result;
}
return true;
}
添加回答
舉報
0/150
提交
取消