相关疑难解决方法(0)

在Angular2中是否有像window.onbeforeunload这样的生命周期钩子？我已经google搜索并在stackoverflow上搜索,但一无所获

大家好我是角色新手,我想在用户点击刷新按钮或后退按钮时根据某些条件停止路由.如果有人知道帮助我,我不知道这是否可行

constructor(private route: Router) {
    this.route.events
        .filter(event => event instanceof NavigationEnd)
        .pairwise().subscribe((event) => {
            if (expression === true){
                // stop routing 
            } else {
                // continue routing
            }      
        });
}

是否有可能,如果是的话,我该怎么做？

提前致谢.

我已经实施了一个CanDeactivate警卫,以避免用户在上传过程中离开页面并且它可以工作.问题是我的消息始终是默认消息(由于浏览器语言而在荷兰语中),甚至自己设置消息,仍然显示相同的默认confirm窗口.我想写自己的消息(实际上我有一个我想要显示的模态,但首先我希望看到我的简单消息工作)

任何想法可能是什么？我错过了什么吗？提前致谢!

这是代码

守护.

    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 …

我有一个页面，它有一个表单，可以在用户离开之前检查用户是否有未保存的更改。

问题是，即使使用 preventDefault() 并返回 false，用户仍然可以单击远离组件。

有没有办法防止 ngOnDestroy 或 click 事件发生？

注意：用户不会去不同的路线，只是来自同一组件的另一个选项卡。

ngOnDestroy() {
    if (this.myForm.dirty) {
        let save = confirm('You are about to leave the page with unsaved changes. Do you want to continue?');
        if (!save) {
            window.event.preventDefault();
            return false;
        }
    }
}

使用@HostListener挂钩,但确认对话框(询问:你想离开这个页面？...还是你想重新加载这个页面？)没有显示.

代码有效,但确认对话框未显示.

在这里我有:

@HostListener('window:beforeunload', ['$event'])
public doSomething($event) {
    console.log("do I see this?") // <---- this logs to the console.

    return "something else";
}

但我没有看到这个:

我正在CanDeactivate其中一个主要组件中实现功能。为了测试它，我使它始终返回，false因此路线一定不能更改。

在此CanDeactivate实现中，对的调用component.canDeactivate()返回一个解析为false的Promise：

@Injectable()
export class CanDeactivateNewRecord implements 
CanDeactivate<NewRecordComponent> {
    canDeactivate(
        component: NewRecordComponent,
        currentRoute: ActivatedRouteSnapshot,
        currentState: RouterStateSnapshot,
        nextState: RouterStateSnapshot ): 
        Observable<boolean>|Promise<boolean>|boolean {

        return component.canDeactivate();
    }
}

这是带有模块路由定义的片段：

const recordsRoutes: Routes = [
    {
        path: 'nou',
        component: NewRecordComponent,
        canDeactivate: [CanDeactivateNewRecord]
    },{
        path: ':id',
        component: RecordComponent
    }
];

当我使用from back的服务方法导航到上一页时，有两种不同的情况：Location@angular/common

• 如果先前的位置是由Angular路由器管理的，则导航将被阻止，并且应用程序将停留在该组件的路径下，
• 如果先前的位置在应用程序外部（例如，如果该组件的路线的网址是直接在浏览器导航栏中引入的），则它将超出应用程序并加载上一页。

即使以前的位置是由路由器管理的，调用location.back()足够的次数（与通过应用程序导航的历史记录的长度一样多），也会使导航返回到启动应用程序之前的页面。

这怎么了

我想阻止页面刷新到处.

我试过下面的代码

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CommonServices } from '../services/common.service'; 

@Component({
  selector: 'app-review-prescription',
  templateUrl: './review-prescription.component.html',
  styleUrls: ['../../assets/css/prescriptionView.css'],
  providers:[
    CommonServices
  ]
})
export class ReviewPrescriptionComponent implements OnInit {
    constructor(
        private commonServices:CommonServices,
        private router:Router
        ){}
    ngOnInit(){
      window.onbeforeunload = function(event) {
        return 'By refreshing this page you may lost all data.';
      }
  }

}

在尝试这样做ngOnChanges(),ngOnInit(),ngOnDestroy()甚至外面的组件类(对不起不合逻辑),但没有什么工作？

我需要Angular或JavaScript中的解决方案而不是jQuery.

谢谢.

我们有一个要求，如果页面被触摸，我们必须提醒用户，如果使用选择不同的菜单应用程序应该显示警告与是或否，如果用户继续继续，那么只应该发生重定向，否则它应该回退到同一页面。我们已经尝试过使用 ngOnDestroy 但是，应用程序正在重定向到下一页而不显示警报。

我的第一种方法是：

 ngOnDestroy()
{        
    this.touched = this.eventForm.touched;
    if (this.touched)
        this.display = true;
}

现在我正在尝试使用CanDeactivate守卫（以这个 plunker为例）：

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { SidebarComponent } from './shared/sidebar/sidebar.component'; 

@Injectable() 
export class ConfirmDeactivateGuard implements CanDeactivate<SidebarComponent> {
     canDeactivate(target: SidebarComponent) { 
          if (target.hasChanges()) { 
               return window.confirm('Do you really want to cancel?'); 
          } 
          return true; 
      } 
}