Angular：Angular 是否支持同一个 DOM 元素上的两个自定义指令？ [关闭]

Question

我正在关注creating a custom directive from angular.io 上的示例。原始代码托管在stackblitz。但是，当我 modified the code 创建辅助指令并将其应用于同一元素时，我没有看到它被应用，也没有看到任何错误。

所以，我的问题是 -

1. Angular 不支持同一元素上的两个指令吗？我发现this 说两个结构指令不能在一个元素上，但不确定自定义指令。
2. 如果它们受支持，那么有人可以找出上述代码不起作用的原因。

谢谢。

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