将指令限制为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"})...

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

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

Answer 1

我知道这个问题已经有几个月了，但你可以在选择器中做到这一点。 selector属性只是一个css选择器，所以你应该能够做到这样的事情：

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

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

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

Answer 2

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

在您的情况下，您可以检查绑定指令的位置，如下例所示：

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