javascript - 使用 'document.querySelector' 查找元素后，“单击”功能在 typescript/angular 中不起作用

Question

我的 Angular 8 项目的页面上有一个元素。

此元素具有“data-convo-id”属性，并附加了一个唯一的字符串。

此元素上有一个点击功能，它将根据也在该元素上的数据属性加载数据(如上所述)。

因为严格来说我无法访问该元素，所以我需要一种方法来使用“document.querySelector()”在此页面上找到该元素，然后触发对它的点击。这反过来将触发附加到该元素的函数，该函数将根据请求加载数据。

我已经尝试了两种不同的方法来执行此操作，但都不起作用。见下文。

方法一:

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click on that element.
relevantElem.click();

方法二:

// Create the event
let event = document.createEvent("HTMLEvents");

// Tie the event to 'click'
event.initEvent("click", true, true);

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click event on that element.
relevantElem.dispatchEvent(event);

作为引用，这里是 HTML 元素本身:

<p #el [attr.data-convo-id]="conversation.id" (click)="viewConversation(el)"><strong>VIEW</strong></p>

总而言之，两个点击事件什么都不做。即使我添加了一个“SetTimeout”函数和一个控制台日志来确保它在相当长的时间后被点击，但点击仍然是忽略。

我用上面的代码得到零错误。

Answer 1

在使用 Angular 时应尽可能避免使用原生 JavaScript API。

试试这个:

//In your component class properties
@ViewChildren('el') elList: QueryList<ElementRef>;

//In the relevant part of your code
this.elList.find(x => x.nativeElement.getAttribute('data-convo-id') == currentID).click();