如何解决在生产模式下,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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。