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

Question

我有一个角度分量，其目的如下所示：

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

<a>

占据了div的100%，所以当我点击div或anchor时，我想触发onClick()事件并导航。

问题是有时导航会先发生，而点击事件会丢失。由于我想在悬停时显示我正在导航的网址链接，我认为除了使用 routerLink 之外没有其他解决方案吗？

基本上是为了展示这一点：

Answer 1

您可以将 Router 服务注入组件控制器中，然后在

onClick

函数中设置导航。

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 中实现这项工作的方法是使用 Router

首先在代码开头导入它

import { Router } from '@angular/router'; 然后在构造函数上像这样声明它

  constructor(
    private router: Router,
    ) {}

然后你可以运行你想要的onClick函数并使用该函数

router.navigateByUrl("/abc")

里面有一个字符串可以导航到你想要的网址:)

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

如果您想要视频通话，我可以帮助您，

请随时通过 Whats app 或电子邮件与我联系，Whats app 会更快

[电子邮件受保护]

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 路径有效。