如果您曾经创建过Angular指令，则可能使用了使用方括号作为选择器的构造：
([]) 。 尽管最常采用这种方法，但它并不是唯一可行的方法。 实际上，指令中使用的选择器为程序员提供了广阔的创造力范围。 为了在实践中证明这个想法，我们今天发布的翻译材料讨论了创建旨在与模板中的外部链接一起使用的指令的方法。 特别是，我们将讨论如何找到常规HTML元素，并在必要时使用
:not伪
:not从选择中排除其中的一些元素。
NgForm指令
为了考虑一个复杂选择器的示例，请看一下
ngForm指令：
@Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', })
这里值得注意以下几点：
- 该指令可以为多个选择器设计，可以用逗号列出。
- 在这里，您可以将HTML目标元素（例如
<form> ）与HTML属性（例如ngForm ）混合使用。 - 要从选择中排除某些元素，可以使用
:not伪:not 。
创建使用外部链接的指令
外部链接是指
<a>标记，它没有
routerLink指令。 考虑到我们通过分析前面的示例发现的内容，相应的选择器可以描述如下：
@Directive({ selector: 'a:not([routerLink])', })
该选择器的优点在于，我们无需为可以最好地描述为与某些实体相反的事物创建属性名称。
为了突出显示外部链接，我们可以使用名称为
externalLink的指令之类的东西，但这是完全不必要的，因为这种方法转化为现有机制的重复。 另外，很容易忘记为某些外部链接添加类似的指令。 我们的方法的优势在于，由于只有一条线，我们可以访问所有外部链接。
将指令应用于外部链接的结果应如下所示：
- 链接应在单独的窗口中打开。
rel属性应添加到链接，这将提高性能并提高解决方案的安全性。
这两个目标都可以通过使用
@HostBinding()来实现：
@Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; }
请注意，在这里，除其他外，我们使用
@Input()装饰器装饰了属性，如有必要，它为重新定义提供了可能。
这种解决方案的另一个有效实现可能是使用
@Attribute()装饰器。 这种方法将稍微提高性能，因为与
@Input()装饰器不同的是，使用
@Attribute()相应属性的值仅计算一次，即在更改检查周期中不会经常检查
rel和
target属性。
可以在
这里找到有关此技术的详细信息。
测试指令
让我们创建一个简单的导航块，其中包含指向外部资源的链接：
<nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav>
如果使用Chrome开发人员的工具看到相应的HTML代码，则可以看到以下内容：
应用指令后导航块的HTML代码这正是我们所需要的。 该指令无需其他属性选择器即可工作。
总结
从该资料中，您了解到使用Angular指令时，不必使用属性选择器。 在这里，我们首先检查了
ngForm指令，然后使用获得的知识创建了自己的指令，该指令旨在与外部链接一起使用。 我们希望您发现此技术有用。
亲爱的读者们！ 如果您知道使用Angular开发Web项目的任何非显而易见的技术，请告诉我们。
