在生产模式下，Angular routerLink [ng-reflect-router-link]样式未反映在HTML中

问题描述

对于本地/开发模式下的全局解决方案，[ng-reflect-router-link]在main.scss中工作

[ng-reflect-router-link],// [routerLink]
.pointer {
  cursor: pointer !important;
}

这在生产模式下不起作用，因为[ng-reflect-router-link]没有发送到浏览器。由于我们有很多[routerLink]，是否有任何已知的解决方案仍可以保持全局性？

HTML（dev）：

<div _ngcontent-bbw-c98="" class="value pointer" tabindex="0" ng-reflect-router-link="/whatever,1111">Name</div>

HTML（生产）：

<div _ngcontent-ryp-c98="" class="value" tabindex="0">Name</div>

要以默认的“光标：指针”样式应用于所有[routerLink]。有解决方案吗？

解决方法

[ng-reflect-router-link]是开发模式的一种副作用，可以帮助调试在模板中添加了哪些指令以及它们具有哪些输入参数。他们不会按设计投入生产。

您可以做的是编写一个attribute directive，但是使用与routerLink相同的选择器，将host元素注入其中，然后向其中添加CSS类。 app-custom-link。另外，将CSS选择器中的[ng-reflect-router-link]替换为该类。

通过劫持routerLink的{{1}}指令，您不必像平常那样使用@angular/router本身来修饰所有链接，并且可以添加使用您自己的指令进行其他自定义。

示例

我基于链接的文档创建了这些文件，但是没有运行它们，因此可能存在一些小错误：

routerLink

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: '[routerLink]'
})
export class CustomRouterLinkDirective {
    constructor(el: ElementRef) {
       el.nativeElement. classList.add('app-custom-link');
    }
}

（您也许可以使用现有的指针类，但不确定这样做是什么，因此不想混入。）

用法

.app-custom-link {
  cursor: pointer !important;
}

注意事项

请注意，如果他们更改了路由器的属性选择器（他们可能不会这么做），则必须调整自定义指令。还要注意，您可能真的不能完全依赖指令的执行顺序，即。您的一个和<span [routerLink]="['settings','profile']" >link text</span>一个，所以不要做与路由器冲突的事情，例如。调整链接的@angular/router。

angular angular routerlink