Angular：Angular 是否支持在同一个 DOM 元素上使用两个自定义指令？

Question

我正在按照 creating a custom directive from angular.io. The original code is hosted on stackblitz. However, when I modified the code 上的示例创建辅助指令并将其应用于同一元素，但我没有看到它被应用，也没有看到任何错误抛出。

所以，我的问题是 -

angular 不支持同一元素上的两个指令吗？我发现 this 说两个结构指令不能在一个元素上但不确定自定义指令。
如果它们受支持，那么有人可以确定为什么上面的代码不起作用。

谢谢。

highlight.directive.ts:

@Directive({
  selector: '[lineUnderline]',
})
export class lineUnderlineDirective {
  constructor(private el: ElementRef) {}

  @Input() defaultColor = '';

  @Input('lineUnderline') underlineColor = '';

  @HostListener('mouseenter') onMouseEnter() {
    this.underline(this.underlineColor || this.defaultColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.underline('');
  }

  private underline(color: string) {
    this.el.nativeElement.style.textdecoration = 'underline';
    this.el.nativeElement.style.textdecorationcolor = 'blue';
    this.el.nativeElement.style.textdecorationthickness = '3px';
  }
}

app.component.html:

<h1>My First Attribute Directive</h1>

<h2>Pick a highlight color</h2>
<div>
  <input type="radio" name="colors" (click)="color = 'lightgreen'" />Green
  <input type="radio" name="colors" (click)="color = 'yellow'" />Yellow
  <input type="radio" name="colors" (click)="color = 'cyan'" />Cyan
</div>
<p appHighlight lineUnderline>Highlight me!</p>

<p [appHighlight]="color" defaultColor="violet" lineUnderline>
  Highlight me too!
</p>

<hr />
<h2>Mouse over the following lines to see fixed highlights</h2>

<p [appHighlight]="'gray'" lineUnderline>Highlighted in yellow</p>
<p appHighlight="orange" lineUnderline>Highlighted in orange</p>

Answer 1

好吧，如果问题是您将鼠标悬停在上面时没有看到下划线，那么您正在访问错误的样式属性：

textdecoration 应该是 => textDecoration

textdecorationcolor 应该是 => textDecorationColor

textdecorationthickness 应该是 => textdecorationthickness

Angular：Angular 是否支持在同一个 DOM 元素上使用两个自定义指令？

Angular: Does Angular support two custom directives on the same DOM element?

custom-directive

angular