在 Angular 中全局注册一个指令

Posted 2023-03-13

【中文标题】在 Angular 中全局注册一个指令

【英文标题】：Globally register a directive in Angular

【发布时间】：2016-03-27 07:08:57

【问题描述】：

我正在开发一个 Angular 应用程序。我需要为所有链接添加特殊行为。在 AngularJS 中只会写一个这样的指令：

angular.module('whatever.module', []).directive('href', function() 
    return 
        restrict: 'A',
        link: function($scope, $element, $attrs) 
            // do stuff
        
    ;
);

在 Angular 中，我可以编写如下指令：

@Directive(
    selector: '[href]',
)

export class MyHrefDirective 
    constructor() 
        // whatever
    

但是我怎样才能告诉应用程序在全局范围内使用该指令呢？我有很多关于它们的链接的观点。我是否必须导入它并在每个组件的directives 数组中指定它（这是很多）？

我尝试将它注入到 bootstrap 函数中，就像您应该使用服务一样在全局范围内拥有一个实例，但 这不起作用

【问题讨论】：

我认为，如果您在全局范围内提供指令，我的意思是在引导根组件时，则无需在每个组件的数组中导入

如果你读过我问题的最后一句话，你就会知道我已经尝试过了。

【参考方案1】：

我的理解是您必须在组件级别选择加入所有自定义指令。只有 PLATFORM_DIRECTIVES 被隐式包含（ngFor、ngIf 等）。

但是，您可以将自己的自定义指令注册为 PLATFORM_DIRECTIVE

import  provide, PLATFORM_DIRECTIVES  from '@angular/core';

bootstrap(RootCmp, [
  provide(PLATFORM_DIRECTIVES, useValue: YourCustomDirective, multi: true),
]);

这里有一篇文章详细讨论了这个过程： http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html

编辑： 我现在认为这不是一个问题，因为组件是在模块级别声明的。这意味着更少的重复，因为您不再需要在单个组件级别声明子组件。

【讨论】：

谢谢。这是一个很好的回答，我没有意识到这一点。像魅力一样工作。

注意：任何像HTTP_PROVIDERS 这样的<XYZ>_PROVIDERS 都可以直接传递给列表，而所有指令都必须使用provide(..) 传递，正如TGH 上面完美解释的那样。它不必是自定义指令，甚至是基于外部 npm 库的指令，例如 material2 库中的指令也必须以这种方式传递到引导函数。

可能想要更新这个答案，因为它不再相关

任何想法如何在最新版本的 Angular2 中完成？只是在主模块中声明它似乎并不能解决问题，而且 2 个导入似乎被贬低了。

Angular v2.4.x 仍然如此吗？