javascript - 带有参数和返回值的Angular 2 Click事件

Question

这个对我的通用 javascript 函数“openTab”的硬编码调用有效，并且 openTab 的返回值为 false，因此代码将在不提交表单的情况下更改/显示选项卡。

<button class="tablinks" onclick="return openTab(event,'tab1');">Tab 1</button>

一旦我做出这个动态，我就遇到了几个错误:

<ng-container *ngFor="let option of question.options">
    <button class="tablinks" (click)="return openTab(event, option.tabId);">{{ option.tabName }}
</ng-container>

上面的代码是我试图到达的地方，但解析器不喜欢“(click)=return”，当我删除返回时，我得到一个异常“_co.openTab”不是一个函数。

以下是我尝试过的:

<button class="tablinks" onclick="return openTab(event, 'tab1');">{{ option.tabName }}</button>

以上有效，但 id 是硬编码的，tabName 是动态的。

<button class="tablinks" onclick="return openTab(event, {{option.tabId}});">{{ option.tabName }}</button>

上面的代码给出了以下错误:出于安全原因，不允许绑定(bind)到事件属性“onclick”，请使用 (click)=...

<button class="tablinks" (click)="return openTab(event, {{option.tabId}});">{{ option.tabName }}</button>

由于返回，上面的代码将无法解析:解析器错误:意外的标记

<button class="tablinks" (click)="openTab(event, option.tabId);">{{ option.tabName }}</button>

上面的代码解析但是当你点击按钮时你得到:TypeError: _co.openTab is not a function

<button class="tablinks" (myClick)="openTab(event, option.tabId);">{{ option.tabName }}</button>

上面的代码解析了，但是当你点击按钮时没有任何反应，没有调用 openTab，没有错误

有什么建议吗？

Answer 1

语法是$event: https://angular.io/guide/user-input#get-user-input-from-the-event-object .以下应该有效:

<button (click)="openTab($event, option.tabId)"></button>

请注意，openTab 方法必须在组件类上公开。