如何在 Angular routerlink 元素中启用文本标记或选择而不启动导航？

Question

我尝试在 Angular 8 表内标记文本，但一旦鼠标单击，应用程序就会启动导航。

    <tr *ngFor="let item of items$ | async" routerLink="{{item.id}}">
      <td>{{item.file.id}}</td>
      <td>{{item.file.name}}</td>
    </tr>

是否可以告诉 Angular，我还想要标记和复制表行文本的可能性？换句话说，如果我标记了文本，要停止导航事件吗？

Answer 1

JavaScript 中没有文本选择事件。选择文本仍然是一个单击事件，因为它有一个鼠标向下和向上事件。

您基本上必须手动完成路线，但如果选择文本，则忽略点击。

@Component({
    template: `
      <tr *ngFor="let item of items$ | async" (click)="onClick([item.id])">
         <td>{{item.file.id}}</td>
         <td>{{item.file.name}}</td>
      </tr>
    `
})
export class MyComponent {
   constructor(private router: Router,
               @Inject(DOCUMENT) private doc: Document) {}

   public onClick(url: any) {
       // ignore click if text is selected
       if(!this.doc.getSelection().toString()) {
           this.router.navigateByUrl(url);
       }
   }
}