Angular 4指令选择器仅针对组件内的元素答案

【问题标题】：Angular 4 Directive selector to target an element inside a component onlyAngular 4指令选择器仅针对组件内的元素
【发布时间】：2018-06-23 14:43:09
【问题描述】：

如何在 Angular 指令中定位组件内的特定元素。
我有一个带有选择器“荧光笔”的组件。该组件具有使用 ng-content 的内容项目。
有一个带有选择器“荧光笔输入”的指令。
我相信这个指令应该只应用于荧光笔组件内的任何输入，但它会应用于应用程序中的所有输入 - 有什么问题？

Plunker：https://plnkr.co/edit/4zd31C?p=preview

@Component({
  selector: 'highlighter',
  template: `
    This should be highlighted: 
    <ng-content></ng-content>
  `
})
export class HighlighterComponent {
}

@Directive({
  selector: 'highlighter input'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

【问题讨论】：

标签： angular selector directive

【解决方案1】：

指令将应用于声明它的模块内的所有选择器。

【讨论】：

指令应该基于指令选择器应用！在这种情况下如何读取选择器？
大声笑。指令不能应用于选择器。将指令应用于选择器意味着什么？ :D

【解决方案2】：

Angular 中的选择器不支持combinators：

- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)

所以字符串中最后一个不同的选择器获胜，在你的情况下是input。这就是它应用于所有输入的原因。

另一件事是投影内容不被认为位于投影到的组件内。所以即使 Angular 支持组合选择器，选择器 highlighter input 仍然不应该工作。

最简单的解决方案是向输入添加一个类，如下所示：

<input class="highlighter">

并在选择器中定位这个类：

@Component({
  selector: 'input.highlighter'

【讨论】：

【解决方案3】：

One clue that I found in the Angular doc 是：

Angular 只允许指令在不跨越元素边界的 CSS 选择器上触发。

【讨论】：

究竟是什么意思？