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

Posted 2023-03-05

【中文标题】使用angular2在table1中单击元素时如何将元素聚焦在table2中

【英文标题】：How to focus the element in table2, when the element is clicked in table1 using angular2

【发布时间】：2018-01-14 08:37:56

【问题描述】：

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

【问题讨论】：

我不确定焦点功能是否适用于非输入元素。即使通过香草JS

感谢您的回复。可以使用什么来满足我的要求？请帮忙

先让我了解需求。您想在第一个表的链接点击正确后立即自动向上滚动第二个表吗？

如果我滚动获取公司名称.. 不向上滚动，它必须将其聚焦到那里.. 就像我有 12 个车辆名称，所以车辆表将更多和各自的公司条目将只有一个..因此公司名称将在公司表的第一行，而车辆将在第 12 行。因此，它必须专注于公司名称的第一行，而不是滚动和查看

不是 angular2 用户，但这可能会有所帮助 blog.thecodecampus.de/angular-2-set-focus-element

【参考方案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，以显示最重要的公司数据。所以你不需要把注意力从车辆列表上移开。首先，当您单击锚点时，您应该离开

【讨论】：

感谢您的回复。我会试试的

对不起，我有一个错字。它应该是：vehicle.companyName我会更新答案

是的，我会试着告诉你

我试过但没用..它没有集中注意力，而是在上升

好的，您可以同时查看两个表吗？您不必在页面中向上滚动吗？锚标签解决了滚动问题。当谈到关注显示标签时，我会说这是不可能的，因为它不是输入字段。但是你可以使用 ngClass 来设置它的样式。 1.当您按下我上面建议的锚链接时，您可以添加 (click)="onCompanyNameClick(company.companyName)。在该方法中，您可以在 componay 表中添加 this.selectedComponyName =companyName，您可以进行 ngClass 检查在成员上。并添加一个具有任何背景颜色或样式的类。

【参考方案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>

【讨论】：

感谢回复我会试试的

对不起，它没有滚动顶部，当我点击第 12 辆车时，它必须滚动顶部并显示公司名称。请帮忙

请参考下面的例子plnkr.co/edit/93xihP4APBFKRAImE1SU?p=preview

谢谢我会尝试

如果它正在聚焦，那么肯定会向上滚动到活动元素。如果它在循环中，那么它应该用索引处理。让我再分享一个例子。