Angular 路由器链接和点击事件触发

Question

我有一个 angular 组件，目的如下所示：

<div click="onClick()">
<a [routerLink]="url">
</a>
</div>

<a>占据了 100% 的 div，所以当我点击 div 或锚点时，我想触发 onClick() 事件加上导航。

问题是有时导航先发生，点击事件丢失。 因为我想在 hover 上显示我正在导航的 url 链接，我认为除了使用 routerLink 之外没有其他解决方案吗？

基本上是为了表明这一点：

如果没有，我怎么能确保尽管导航，我总是触发 onClick()？

Answer 1

您可以在组件 Controller 中注入路由器服务，然后在onClick function 中设置导航。

constructor(private readonly router: Router) { }

接着：

onClick() {
     this.router.navigate(['url']);
    ...
}

Answer 2

这是怎么回事！

在我们得到实际答案之前先说几句话，以确保您知道如何使用路由器模块

const routes: Routes = [
  { path: "", pathMatch: "full", redirectTo: "home" },
  { path: "home", component: HomepageComponent },
  { path: "register", component: RegisterComponent },
  { path: "buyingmainpage", component: BuyingmainpageComponent , canActivate : [AuthGuard] },
  { path: "checkoutmainpage", component: CheckoutmainpageComponent , canActivate : [AuthGuard] },
  { path: "checkoutsuccess", component: CheckoutsuccessComponent , canActivate : [AuthGuard] },
  { path: "**", component: Eror404Component },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

告诉我这是否是您熟悉的熟悉概念？

第一步是在上面的代码中包含您想要的 url 的路径

答案

在 angular 中进行这项工作的方法是使用路由器

首先你在代码的开头导入它

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

然后在构造函数 function 你这样声明它

  constructor(
    private router: Router,
    ) {}

然后你可以运行你想要的 onClick function 并使用 function

router.navigateByUrl("/abc")

里面有一个字符串导航到你想要的 url :)

onClick(){
this.router.navigateByUrl("/checkoutmainpage")
}

如果你想视频通话我可以帮你

请随时通过 whats app 或 email 与我联系，whats app 会更快

+972505884960 / dolev146@gmail.com

Answer 3

Click 事件将在 url href 触发 (routerLink) 之前发生。 您要做的是通过防止事件冒泡来确保发生一个而不是另一个。 我们在我们的应用程序中做同样的事情来维护访问链接的浏览器“历史记录”，但是让点击事件实际进行路由，因为在导航之前我们需要做一些额外的设置。

<div>
  <!-- ie: <a href="the-path-to-my-route"></a> -->
  <a click="onClick(); $event.preventDefault()" [routerLink]="url">
  </a>
</div>

以上将处理点击事件，以及显示完整 url 的锚点 href 的实际元素。

然后在你的 ts

onClick() {
  this._router.navigate([url]);
}

只要确保您的路线 url 路径有效即可。