Angular如何编写不匹配mailto链接的a标签指令选择器

Angular 指令选择器没有完整实现CSS选择器的全部语法规则，你写法中:not([href^="mailto:"])里用到的属性前缀匹配符^=，无法在Angular选择器的:not()伪类中被正确解析，整个过滤条件会被解析器直接忽略，最终选择器等价于a[href]，自然会把mailto类型的链接也匹配上。

目前Angular所有已发布版本（含17、18最新稳定版），都不支持在:not()伪类内使用^=（前缀匹配）、$=（后缀匹配）、*=（包含匹配）这类属性子串匹配语法，没有hack写法可以绕开这个解析限制。

最稳妥、兼容性最好的实现方式，是把选择器简化为匹配所有带href属性的a标签，再在指令内部的初始化逻辑中过滤mailto协议的链接，跳过对应逻辑即可，参考代码如下：

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

@Directive({
    selector: 'a[href]',
    standalone: true
})
export class CustomLinkDirective implements OnInit {
    private readonly elementRef = inject(ElementRef<HTMLAnchorElement>);

    ngOnInit(): void {
        const linkHref = this.elementRef.nativeElement.getAttribute('href');
        // 命中mailto协议直接终止逻辑，不执行后续指令操作
        if (linkHref?.startsWith('mailto:')) {
            return;
        }

        // 此处编写你原本要给非mailto链接执行的业务逻辑
    }
}

如果你一定要在选择器层面做过滤，只能手动给所有mailto链接统一添加一个固定标记属性（比如data-skip-link-directive），再把选择器写为a[href]:not([data-skip-link-directive])，但这个方案需要你在编写模板时主动给mailto链接加属性，维护成本很高，不推荐使用。

内容的提问来源于stack exchange，提问作者Gargoyle