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

【问题标题】：Limit directive to specific host (component) in Angular将指令限制为 Angular 中的特定主机（组件）
【发布时间】：2018-03-11 07:21:52
【问题描述】：

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

例如：

@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 将被忽略。

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

您不需要使用主机。在host 中，您可以编写您想要监听的事件以及属性绑定等其他一些属性。关于这个，你可以在那里阅读Angular Directives

在你的情况下，你可以检查你在哪里绑定你的指令，就像在这个例子中一样：

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

【讨论】：

【解决方案2】：

我知道这个问题已经有几个月的历史了，但您可以在选择器中执行此操作。 selector 属性只是一个 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'

【讨论】：