在 Angular 中全局注册一个指令
Globally register a directive in Angular
我正在开发 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
函数中,就像您应该对服务所做的那样,以便在全球范围内拥有一个实例,但是那没有用
我的理解是您必须在组件级别选择加入所有自定义指令。仅 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
编辑:
我现在认为这不再是一个问题,因为组件是在模块级别声明的。这意味着更少的重复,因为您不再需要在单个组件级别声明子组件。
我正在开发 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
函数中,就像您应该对服务所做的那样,以便在全球范围内拥有一个实例,但是那没有用
我的理解是您必须在组件级别选择加入所有自定义指令。仅 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
编辑: 我现在认为这不再是一个问题,因为组件是在模块级别声明的。这意味着更少的重复,因为您不再需要在单个组件级别声明子组件。