使用TS的Angular Disable 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;
}

Answer 1

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

 <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