使用angular2在table1中单击元素时如何将元素聚焦在table2中

Question

我有两张桌子，一张是用于车辆和公司的。如果我点击车辆名称，其相应的公司名称会显示在公司表中。所以，现在我有大约 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

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

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

Answer 1

我不明白为什么按车排应该专注于公司排。在逻辑上不应该点击车辆行引导您进入车辆详细信息页面吗？

如果您在车辆对象上有公司名称，您可以。

在公司列表中

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
         <span id="{{company.companyName}}">{{company.companyName}}/span>
   </div>

在车辆列表中。添加一个直接显示公司名称的新锚。按此链接开始滚动到公司表

<a href="#{{vehicle.companyName}}">{{vehicle.companyName}}</a>

您还可以在车辆列表中的公司锚点上添加一个小的浮动 div，以显示最重要的公司数据。所以你不需要把注意力从车辆列表上移开。首先，当您单击锚点时，您应该离开

Answer 2

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

1. 使用锚标签
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>