在 Angular 中自定义 routerLink 5

Question

在我的应用程序中，我根据 routerLink 中传递的参数使用 routerLink 创建我的 link。

<a [routerLink]="['/home/global/userprofile',UserId]">

上面的代码使用提供的 userId 生成 links，但我想自定义 angular routerLink 以便我可以检查 UserId 是否有效，如果有效我将 return 转换后的 href link 通过这个，如果不是我将 return 空白或空 url.

我不能使用任何其他指令方法或管道工厂，因为我在项目的多个地方使用此 routerLink 代码，所以我只是不想去更改每个编写该代码的地方。任何人都可以指导我吗？我只需要概念，我可以为这个想法写代码。

如有任何疑问，我可以详细解释。

Answer 1

我建议您在组件 class 中使用编程重定向，而不是使用 routerLink 指令，如下所示：

HTML 组件文件

<a (click)="goToUserProfile(UserId)">Some link</a>

TS 组件 class:

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

constructor(private router: Router) {}

goToUserProfile(userId: number) {
    if (/* userId verification*/) {
        this.router.navigate(['/home/global/userprofile', userId]);
    }
    // do nothing
}

否则，您可以使用路由器防护，这里有一些有用的链接：

希望对您有所帮助。

在 Angular 中自定义 routerLink 5

Customize routerLink in Angular 5

angular5

routerlink

angular-routerlink