如何在 Angular 应用程序中使用 ngIf 在 html 中选择不同的选择器答案

【问题标题】：How to use ngIf to choose diffrent selector in html in an angular app如何在 Angular 应用程序中使用 ngIf 在 html 中选择不同的选择器
【发布时间】：2022-08-18 20:10:58
【问题描述】：

我有一个关于如何在 HTML 代码中使用 ngIF 来选择不同选择器的问题。

我显示我的代码如下：

in HTML Code:

<a class=\"style\" (click)=clickFunction() (keyup.Enter)=ke()>
  <div>
    content

  </div>
</a>

这是 html 在共享组件中，

我想将此共享组件用于具有输入参数 noClickAndKeyEnter=true |false 的其他组件

所以在这种情况下，我应该更改 html 代码如下：

<a class=\"stype\" (click)=\"noClickAndKeyEnter ? clickFunction(): \'\'\" (keyup.Enter)=\"noClickAndKeyEnter ? ke() :\'\'\">
  <div>
    content

  </div>
</a>

我的问题是，是否还有一种简单的方法可以解决我的问题，即我没有用 noClickAndKeyEnter 写所有地方？：

任何解决方案？

标签： html angular angular-ng-if

【解决方案1】：

您可以使用回调模式！

conditionallyExecute(callback: Function) {
    if(this.noClickAndKeyEnter) {
        callback()
    }
}

html

<a class="stype" (click)="conditionallyExecute(clickFunction)" (keyup.Enter)="conditionallyExecute(ke)">
  <div>
    content

  </div>
</a>

【讨论】：