时间戳

首页 > 解决方案 > Angular routerLink [ng-reflect-router-link] 样式在 prod 模式下未反映在 HTML 中

css - Angular routerLink [ng-reflect-router-link] 样式在 prod 模式下未反映在 HTML 中

问题描述

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

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

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

HTML（开发）：

<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]。有什么解决办法吗？

标签： cssangularrouterlink

解决方案

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

您可以做的是编写一个属性指令，但使用与 相同的选择器routerLink，将宿主元素注入其中，并为其添加一个 CSS 类，例如。app-custom-link. 此外，用[ng-reflect-router-link]类替换 CSS 选择器。

通过劫持 的routerLink指令@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一个，所以不要做与路由器冲突的事情，例如。调整href链接的。

推荐阅读