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

Question

我正在按照从 angular.io 创建自定义指令的示例进行操作。 原始代码托管在stackblitz 上。 但是，当我修改代码以创建辅助指令并将其应用于同一元素时，我没有看到它被应用，也没有看到抛出任何错误。

所以，我的问题是——

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

谢谢。

亮点.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