Question

这不是一个真正的问题，只是试图更好地理解行为。

我有一个mat-table，我一直在处理click个事件以突出显示行，而我现在正在切换以使其与router一起使用。

当我将routerLinkActive添加到mat-row然后点击该行时，它会突出显示。事实证明这是由于:focus由于某种原因而设置导致蓝色轮廓。

<mat-row 
        matRipple

        routerLink="doesnt/exist"
        routerLinkActive="class-doesnt-even-exist"

        *matRowDef="let row; columns: displayedColumns;"
        (click)="alert('clicked')"></mat-row>

它甚至不是突出显示的活动路线，只是我点击的行。

mat-table的文档甚至说明了以下内容：

mat-table本身不管理任何焦点/键盘交互。用户可以在其中添加所需的焦点/键盘交互应用

我查看了the router directives的来源，并且没有看到关于焦点的任何内容。

通过设置我自己的:focus选择器可以很容易地解决问题，但我正试图了解这是出于好奇的原因。

以下是一个示例：

https://stackblitz.com/edit/angular-5-generic-data-table-mzro7w?file=app/data-table/data-table.component.html

Answer 1

好吧它看起来像是curl_setopt($this->curl, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($this->curl, CURLOPT_SSL_VERIFYPEER, 0);。

router_link的构造函数执行以下操作

tabindex

所以你必须设置tabIndex =“ - 1”如果你有一个mat-table而你不希望每一行都是一个制表位。在某些情况下你可能会想要这个，但对我来说，我想要的网格就像一个不可标记的单个实体。

现在我有了这个：

constructor(
      private router: Router, private route: ActivatedRoute,
      @Attribute('tabindex') tabIndex: string, renderer: Renderer2, el: ElementRef) {
    if (tabIndex == null) {
      renderer.setAttribute(el.nativeElement, 'tabindex', '0');
    }
  }

此外，您仍然需要添加此css以防止轮廓（tabindex即使设置为-1也允许浏览器在单击或右键单击时将焦点设置在元素上）：

<mat-row *matRowDef="let row; columns: selectedColumns;"
         matRipple
         routerLink="order/{{ row.orderId }}"
         routerLinkActive="highlighted"
         tabindex="-1"
         (click)="clicked(row)"></mat-row>

似乎这种行为是added Dec 2016但不是可选的。

routerLinkActive的存在如何导致mat-row被聚焦

1 个答案: