将指令限制为 Angular 中的特定主机（组件）

Question

是否可以限制哪些组件可以有自定义指令？

例如：

@Directive({ 
    selector: '[myHighlight]', 
    host: "my-component" //!!!!!!!!!
})
export class HighlightDirective {
    constructor(el: ElementRef) {  //el is my-component - can not be nothing else !!!!
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

@Component({selector: "my-component"})...

用例：
我想为特定的第三方组件编写指令。我将使用该第三方组件属性，因此对另一个组件的指令没有任何意义并且会抛出错误。

这意味着 div 上的 myHighlight 将被忽略。

Answer 1

您不需要使用主机。在host里面可以写你想监听什么事件，还有一些属性绑定之类的属性。关于这个，你可以在那里阅读 Angular Directives

对于您的情况，您可以像本例中那样检查绑定指令的位置：

@Directive({ 
    selector: '[myHighlight]', 
})
export class HighlightDirective {
    constructor(el: ElementRef) { 
       if (el.nativeElement.tagName === "MY-COMPONENT"){
           el.nativeElement.style.backgroundColor = 'yellow';
       } 
    }
}

Answer 2

我知道这个问题已经有几个月了，但您可以在选择器中完成。选择器属性只是一个 css 选择器，因此您应该能够执行以下操作：

@Directive({ 
    selector: 'my-component[myHighlight]'
})

这只会匹配具有 myHighlight 属性的 my-component 标签。如果您尝试将 myHighlight 属性应用于 div 标记，您最终会在控制台中收到如下错误：

Can't bind to 'myHighlight' since it isn't a known property of 'div'

将指令限制为 Angular 中的特定主机（组件）

Limit directive to specific host (component) in Angular

angular2-directives

angular