Angular：如何在 html 中调用 Typescript 方法答案

【问题标题】：Angular: how to call a Typescript method in htmlAngular：如何在 html 中调用 Typescript 方法
【发布时间】：2019-07-20 03:24:49
【问题描述】：

我创建了一个 Angular 组件，它有一个导航栏，它被创建为一个未格式化的列表。通过单击列表元素，我想从 component.ts 中调用一个方法，该方法会更改该组件中显示的组件。

我是 Angular 和 Web 开发的绝对初学者，所以我需要帮助来解决这个问题。

我尝试在列表元素中使用button oncklick="methodcall()" 和a href="methodcall()"，它们都有效。但是使用按钮会改变我的导航栏图标的样式，并且链接会在 uri 中显示函数调用。我不想要任何这种副作用。

html:

<nav>
  <ul>
    <li onclick="switch('page1')">page1</li>
    <li onclick="switch('page2')">page2</li>
  </ul>
</nav>

component.ts:

switch(propertyName: string) {
    ...
}

在不改变我的样式或 uri 的情况下调用方法的简单方法会很棒！

【问题讨论】：

标签： html angular typescript

【解决方案1】：

您应该可以使用(click) 而不是onclick。

类似这样的：

<nav>
    <ul>
      <li (click)="switch('page1')">page1</li>
      <li (click)="switch('page2')">page2</li>
    </ul>
</nav>

根据您切换页面的方式，我也会考虑使用Angular Routing，它非常强大！看看吧。

【讨论】：

【解决方案2】：

您需要在事件周围加上括号来绑定它。

模板/HTML：

<li (click)="switch('page1')">page1</li>

组件.ts：

export class ClickMeComponent {

  public switch(pageId: string) {
    // do something
  }
}

这里是关于事件绑定的官方 Angular 文档： https://angular.io/guide/template-syntax#event-binding

【讨论】：

【解决方案3】：

<nav>
    <ul>
      <li (click)="switch('page1')">page1</li>
      <li (click)="switch('page2')">page2</li>
    </ul>
  </nav>

应该可以，但请记住它实际上在语义上不正确，同样出于可访问性的原因，我总是使用按钮或锚点进行点击。图标的样式可以通过 CSS 保持在其原始状态。我会建议执行以下操作

<nav>
    <ul>
      <li>
        <button type="button" (click)="switch('page1')">
          <span class="icon"></span>
          <span class="label">page1</span>
        </button>
      </li>
      <li>
        <button type="button" (click)="switch('page2')">
          <span class="icon"></span>
          <span class="label">page2</span>
        </button>
      </li>
    </ul>
  </nav>

【讨论】：