在Angular 2中加载所有数据后自动单击元素

Question

我试图弄清楚如何在加载所有数据后自动触发某个元素上的点击事件。

代码在html文件中是这样的：

<div *ngFor="let location of locations; let i = index;" class="location-wrapper" (click)="onSelect($event, i); $event.stopPropagation();">
    <div class="location">{{ location }}</div>
</div>

onSelect()方法正在对与当前位置相关的内容进行一些扩展。

我想要实现的是，我希望每次到达此页面时，都可以自动点击*ngFor的第一个元素来显示与其相关的内容。

或许我们可以使用其他类似的方法来实现它？

我尝试了几种方法来做到这一点， 比如在window.on('load', function() { // blablabla });

中添加一些代码

或使用ngAfterViewInit()和ngAfterViewChecked()两者都不能正常运作。

Answer 1

您可以通过至少两种方式完成此操作。第一个是老式的javascript click()。第二个只是使用组件逻辑，只需创建一个像selectedLocation这样的变量，它将保存当前展开的当前index或Object。不要忘记在加载页面可见后为其添加初始值。

Javascript dispatchEvent（不是Angular friendly solution）

我们只需要抓住我们的项目并使用click()函数。就是这样。要获取元素，我们可以使用基本的javascript方法document.getElementById（elementId）＆＃34;或者使用template variable。

<div 
   [id]="'location_' + i" <!-- For biding with document.getElementById -->
   #locationPanel <!-- For biding with template variable -->  
   *ngFor="let location of locations; let i = index;" class="location-wrapper" (click)="onSelect($event, i); $event.stopPropagation();">
    <div class="location">{{ location }}</div>
</div>

使用Id，它看起来像document.getElementById("location_0").click()这将在元素上发送click事件。

对于组件中的模板变量，您需要添加

@ViewChildren locationPanel: QueryList<any>;

openFirstLocation() {
   if (this.locationPanel && this.locationPanel.first) 
       this.locationPanel.first.nativeElement.click();
}

在afterViewInit中只需拨打this.openFirstLocation();

即可

请注意，它不是Angular友好的，因为Angular在您直接干扰DOM时不喜欢。但是，只要我们不改变结构中的任何内容，那么一切都应该没问题，但我们应该避免使用普通的javascript来操作dom。

请注意使用@ViewChild和document.* methods。

  

当需要直接访问DOM时，使用此API作为最后的手段。请使用Angular提供的模板和数据绑定。或者，您可以查看Renderer2，它提供了可以安全使用的API，即使不支持直接访问本机元素也是如此。   依赖于直接DOM访问会在应用程序和渲染层之间产生紧密耦合，这使得无法将两者分开并将应用程序部署到Web工作者。

     

来自Angular docs link