Question

我一直在关注一些课程，并阅读各种博客，内容涉及Angular 2中的路由。位置服务上的goBack方法是用户可以导航到以前查看的页面的一种方式（以及浏览器的后退按钮）。

我的问题是，可以采取哪些措施来阻止用户离开应用程序本身。 Routing tutorial建议使用CanDeactive后卫。我已经完成了一些阅读，但还没有完全理解这个概念。

例如，我可以有一个包含goBack（）方法的简单组件。通过禁用goBack方法阻止用户离开应用程序（通过使用goBack方法）的最佳方法是什么，同时还考虑到他们可能并不总是在同一点上进入应用程序。如果这是有道理的。

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <h2>Angular Routing</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet ipsum massa, eget vulputate risus blandit sed. Vestibulum ullamcorper leo sagittis massa aliquet mattis.</p>

    <button (click)="goBack()">&#10094;&#10094; BACK</button>

    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor (
    private _location: Location,
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

  goBack(): void {
    this._location.back();
  }

}

这可能是不可能的，但它让我思考。

Answer 1

我现在正在使用Angular 8/9。对我来说有用：

close_button() {
    if (window.history.length > 1) { //<--If Tab was opened by a Link
        this._location.back()
    } else {
        this._router.navigate(['/']); //<-- Set target here
        console.log("go to home")
    }
}

您还可以使用

停用按钮

<button (click)='close_button()' [disabled]="this.router.url === '/topPath'">Back</button>

防止离开主屏幕

在Angular 2中的位置服务上使用goBack方法时，防止用户离开应用程序

1 个答案: