Question

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

当它在那里时，我无法在用户点击它时停止导航。

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

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

下面我的js不是在角度上下文btw中运行，它是普通的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)侦听器来处理类方法中的逻辑，那么可以尝试一下。在您的组件类中：

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中，如果锚点指向用户现在所在的同一网址，则导航将不会发生，因此根据具体情况，将网址更改为当前页面的网址并完成。< / p>

其他选项：您可以编写一个处理导航的指令。如果这个答案不够令人满意，请告诉我，所以我可以采取另一种方法。这是迄今为止最懒的。

Answer 2

Angular的启用/禁用给定路线导航的标准方法是实现CanDeactivate route guard。同样，您可以实施CanActivate路线防护来启用/禁用导航到给定路线。

CanDeactivate路线保护的示例显示在 this stackblitz 中，其中复选框的状态允许或阻止来自＆＃34; Home＆＃34的导航;页。

在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,
  ],
  ... 
})

在家中/停用警卫：

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;
  }
}

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

2 个答案: