我正在按照從 angular.io 創建自定義指令的示例進行操作。原始代碼托管在stackblitz 上。但是，當我修改代碼以創建輔助指令并將其應用于同一元素時，我沒有看到它被應用，也沒有看到拋出任何錯誤。
所以，我的問題是——
- angular 不支持同一元素上的兩個指令嗎？我發現這表明兩個結構指令不能在一個元素上，但不確定自定義指令。
- 如果它們受到支持，那么有人可以確定為什么上述代碼不起作用。
謝謝。
亮點.directive.ts：
@Directive({
selector: '[lineUnderline]',
})
export class lineUnderlineDirective {
constructor(private el: ElementRef) {}
@Input() defaultColor = '';
@Input('lineUnderline') underlineColor = '';
@HostListener('mouseenter') onm ouseEnter() {
this.underline(this.underlineColor || this.defaultColor || 'red');
}
@HostListener('mouseleave') onm ouseLeave() {
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>
uj5u.com熱心網友回復：
好吧，如果問題是當您懸停它時沒有看到下劃線，那么您訪問的樣式屬性是錯誤的：
textdecoration 應該是 => textDecoration
textdecorationcolor 應該是 => textDecorationColor
textdecorationthickness 應該是 => textdecorationthickness
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343772.html
上一篇：在無限串列的串列上使用foldr