Question

我希望从HTML

中获得以下良好的旧功能

<a href='http://www.example.com' onclick="if ( window.confirm ('Are you sure you want to go there?') === false ) { return false; } ">goto example.com</a>

如果用户选择取消选项，则浏览器不会移动，故事结束。

那么，您如何在以下基于Angular的HTML中实现这一目标？

<a routerLink='/go-there'> go </a>

显然，这不起作用：

<a routerLink='/go-there' onclick="if ( window.confirm ('Are you sure you want to go there?') === false ) { return false; } "> go </a>

目前，我在.ts上实现了这一点，同时尊重routerLink参考下的链接，就像这个

const user_approval = window.confirm ('Are you sure you want to go there?');
if ( !user_approval ) {
  alert('Action is cancelled. \nYou are not going there.');
  return false;
}

这可行，但我们已经把它变成了routedLink！我们可以避免这种情况。

如果用户回应改变主意，你如何取消routerLink目的地？

Answer 1

你应该以另一种方式做到这一点。首先，从HTML中删除routerLink，并使用（单击）而不是onclik：

<a (click)="check()">GO</a>

在您的组件中，使用Angular的模块路由器：

import { Router } from '@angular/router';

constructor(private router: Router) {}

  check() {
    const user_approval = window.confirm ('Are you sure you want to go there?');
      if ( !user_approval ) {
          alert('Action is cancelled. \nYou are not going there.');
          return false;
      } else {
          this.router.navigate(['/go-there']);
      }
  }

这样，您将执行将导航或不导航的功能，具体取决于用户的选择。

Answer 2

作为click方法+ this.router.navigate的替代方法，您还可以在要添加提示的路径上使用CanDeactivate Guard。（https://angular.io/api/router/CanDeactivate）

@Injectable()
export class CanDeactivateGuard implements CanDeactivate {

    constructor(){}

    canDeactivate(): boolean {
        let confirm = window.confirm('Are you sure you want to go there?');
        return confirm;
    }
}

这是canDeactivate后卫的一个非常基本的例子。这是一个演示plnkr（https://plnkr.co/edit/CW9ofxscCgaZMlWVrfer?p=preview）

作为旁注，一旦你进入更高级的提示实现，它很可能是异步的。在这种情况下，您可以将实现包装在一个observable中。

canDeactivate(): Observable<boolean> {
    return new Observable(observer => {
        // example of an asynchronous prompt implementation
        bringUpSomePrompt('Are you sure you want to go there?', (confirm) => {
            observer.next(confirm);
            observer.complete();
        });
    });
}

如何在角度4 +的用户提示符下取消routerLink？

2 个答案: