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

Question

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

这段代码在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）“或与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友好的，因为当您直接干扰DOM时， Angular不喜欢。 但是，只要我们不更改结构中的任何内容，那么一切都应该没问题，但我们应该避免使用简单的javascript操作dom。

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

当需要直接访问DOM时，将此API用作最后的手段。 改用Angular提供的模板和数据绑定。 另外，您可以看一下Renderer2，它提供了即使不支持直接访问本机元素也可以安全使用的API。 依靠直接DOM访问会在您的应用程序和呈现层之间建立紧密的耦合，这将使得不可能将两者分开并将您的应用程序部署到Web Worker中。

来自Angular docs 链接