0

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

所以，我的问题是——

  1. 角度不支持同一元素上的两个指令吗？我发现这说两个结构指令不能在一个元素上，但不确定自定义指令。
  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>
4

1 回答 1

1

好吧，如果问题是悬停时看不到下划线，那么您访问的是错误的样式属性：

textdecoration 应该是 =>textDecoration

textdecorationcolor应该是 =>textDecorationColor

textdecorationthickness应该是 =>textdecorationthickness

于 2021-11-01T19:01:51.830 回答