角路由器链接和点击事件触发器答案

【问题标题】：Angular router link and click event trigger角路由器链接和点击事件触发器
【发布时间】：2021-03-27 10:46:32
【问题描述】：

我有一个角度组件，为此目的看起来像这样：

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

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

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

基本上是为了展示这个：

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

【问题讨论】：

我正在为您制作一个 stackblitz 示例，请稍等
@DolevDublon 谢谢
嘿，stackblitz 示例无法正常工作，因为 stackblitz 的工作方式与本地编程环境不同，所以我会提到您为使东西为您工作而采取的步骤！

标签： angular click angular-routerlink

【解决方案1】：

怎么了！

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

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

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

  constructor(
    private router: Router,
    ) {}

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

router.navigateByUrl("/abc")

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

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

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

请随时通过 whats 应用程序或电子邮件与我联系，whats 应用程序会更快

+972505884960 / dolev146@gmail.com

【讨论】：

我对此很熟悉，但我想要 routerlink 添加的 url popover。使用路由器它不会显示。
你能打电话给我吗？我只需要 2 分钟就可以为您服务
+972-50-588-4960

【解决方案2】：

您可以在组件控制器中注入路由器服务，然后在 onClick 函数中设置导航。

constructor(private readonly router: Router) { }

然后：

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

【讨论】：

但这样我会失去悬停网址我认为浏览器显示