防止在具有 routerLink 的锚点上导航

Question

在我的标记中，有 [routerLink]="(onLink | async).linkURL"

当它出现时，当用户点击它时，我无法阻止导航发生。

如果我删除 [routerLink]="(onLink | async).linkURL"，导航将按预期停止。

有什么办法可以停止这里的导航吗？我无法从标记中删除 [routerLink]="(onLink | async).linkURL"。

我下面的 js 在 angular 上下文中不是运行顺便说一句，它是普通的 js。

Html ..

<div>
    <a id="myLink" [routerLink]="(onLink | async).linkURL">My link</a>
</div>

Javascript ..

document.getElementById('myLink').addEventListener('click', function(event) {
  console.log('click');
  event.preventDefault();
  event.stopPropagation();
});

Answer 1

如果您真的无法删除 [routerLink] 并将其替换为 (click) 侦听器来处理 class 方法中的逻辑，不妨试试这个。在你的组件中 class:

shouldNavigate: boolean = false; // indicated whether it is possible to navigate
constructor(public route: ActivatedRoute) {}

在 HTML 模板中：

<a [routerLink]="shouldNavigate ? (onLink | async).linkURL : route.url">My link</a>

在Angular中，如果锚点指向用户现在所在的同一个url，导航将不会发生，因此根据情况，将url更改为当前页面的 url 并完成它。

其他选项：您可以编写一个指令来处理导航等。让我知道这个答案是否不够令人满意，所以我可能会选择另一种方法。这是迄今为止最懒惰的。

Answer 2

Angular 从给定路线 enable/disable 导航的标准方法是实施 CanDeactivate route guard。同样，您可以实现 CanActivate 路线守卫，以 enable/disable 导航到给定路线。

CanDeactivate 路由守卫的示例显示在 this stackblitz 中，其中复选框的状态允许或阻止从 "Home"页。

在app.module中：

import { AppRoutingModule } from './app.routing.module';
import { DeactivateGuard } from './views/home/deactivate-guard';

@NgModule({
  imports: [ 
    AppRoutingModule, 
    ... 
  ],
  providers: [
    DeactivateGuard
  ],
  ...
})

在app.routing.module中：

import { RouterModule } from '@angular/router';
import { DeactivateGuard } from './views/home/deactivate-guard';

@NgModule({
  imports: [
    RouterModule.forRoot([
      ...
      {
        path: 'home',
        component: HomeViewComponent,
        canDeactivate: [DeactivateGuard]
      },
      ...
    ])
  ],
  exports: [
    RouterModule,
  ],
  ... 
})

在home/deactivate-guard中：

import { CanDeactivate } from '@angular/router';
import { HomeViewComponent } from './home.component';

export class DeactivateGuard implements CanDeactivate<HomeViewComponent> {

  canDeactivate(component: HomeViewComponent) {
    return component.canDeactivate();
  }
}

在home.component中：

export class HomeViewComponent {

  allowNavigation = true;

  canDeactivate() {
    return this.allowNavigation;
  }
}

Answer 3

您可以在组件上使用此导航逻辑。您可以添加 (click)=" method()" 方法锚标记并在组件方法上添加逻辑。我遇到了这个问题并在组件上添加了逻辑并使用 return 以防我想停止导航。

我在组件中使用了路由器。 this.router.navigate([]);

防止在具有 routerLink 的锚点上导航

Prevent navigation on anchor that has routerLink

javascript

anchor

preventdefault

angular