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选择器，所以你应该能够做类似的事情：

- /tmp/.X11-unix:/tmp/.X11-unix
- ~/.Xauthority:/.Xauthority:ro
- /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket

这只会匹配@Directive({ selector: 'my-component[myHighlight]' })个my-component标记。如果您尝试将myHighlight属性应用于myHighlight标记，那么您最终会在控制台中收到错误消息：

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';
       } 
    }
}

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

2 个答案: