javascript - 当使用 angular2 在 table1 中单击元素时，如何聚焦 table2 中的元素

Question

我有 2 个表，一个用于车辆和公司。如果我点击车辆名称，其相应的公司名称显示在公司表中。所以，现在我有大约 12 辆车，当我点击第 12 辆车时，它的名称显示在公司表中，只有当我向上滚动时才能看到。所以我需要直接关注公司名称而不是滚动。请帮忙

这是我的车辆和公司的 HTML 代码:

车辆表:

<md-card *ngFor="let vehicle of vehicleLists | companyfilter:filter" (click)="goToCompany(vehicle)">
 <div >
    {{vehicle.vehicleName}}
  </div> 
   </md-card>

公司表:

<md-card  *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div>
     {{company.companyName}}
 </div></md-card>

TS代码:

goToCompany(vehicle){
this.document.body.scrollTop = 0;
}

借助此链接中的答案，我能够得到我的要求: Scroll Top in angular2

但是，这里它只适用于滚动顶部，如果公司名称列表在 vwhile 名称下面，它不会向下。我也需要我的要求才能在移动响应中工作，在这个 plunker 中它工作正常，但不是我的代码。

插件链接: https://plnkr.co/edit/ZjZApeGBk1P6OamYv21T?p=preview 请帮忙。

Answer 1

您可以使用以下方法实现非输入元素的焦点功能

1. 使用 anchor 标签
2. 为非输入元素添加 tabindex 属性

您可以使用 @Viewchild 和 Renderer 或 ElementRef 访问 Angular 2 中的非输入元素

import --> AfterViewInit

 export class YourComponent implements AfterViewInit {
   @ViewChild('companyTable') vc: any;


  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}

<md-card class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div #companyTable tabindex="0" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-overflow: ellipsis;overflow: hidden;">
     {{company.companyName}}
 </div></md-card>