在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)" 或 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() 这将在元素上调度点击事件。

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

@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 Worker 中。

来自Angular docslink