angular - 使用 TS 的 Angular 禁用 href

Question

我在使用 Angular 和 Typescript 禁用 href 时遇到问题，我不确定我是否走在正确的道路上。

有没有更好的方法来做这样的事情？用红色圆圈寻找类似的东西

ts

ReadOnlyStyleGuideNotes: boolean;

  ngOnInit() {
    this.ReadOnlyStyleGuideNotes = true;
  }

html

<a href="#" 
*ngIf="note.Edited || note.Removed" 
(click)="restoreDefault(note)" 
style="font-size: 12px"
data-disabled="readOnlyStyleGuideNotes">
restore defaults
</a>

CSS类

 a[data-disabled=true] {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

标签： angulartypescript

Answer 1

使用指针事件 None 并用 span 包装 a 元素，以便您可以应用光标

 <span [ngStyle]="{'cursor':readOnlyStyleGuideNotes ? 'not-allowed' :''}"><a 
 [ngClass]="{'disable':readOnlyStyleGuideNotes}" href="#"  
 (click)="restoreDefault(note)" 
 style="font-size: 12px">
 restore defaults</a></span>

css

.disable{
  color: currentColor; 
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

示例：https ://stackblitz.com/edit/angular-22f9ts