mouseenter 条件为 angular

Question

我在 angular 中有一个按钮：

<button type="button" id="bulkInputButton" 
                        (click)="toggleBulkInput()"
                        #bulkInputButton>Show
                        Bulk Input</button>

我想根据某些条件显示不同的工具提示。基本上我想将此 jquery 代码合并到按钮标记本身中：

$("#InputForm button#bulkInputButton").mouseenter(function(e) {
            //TODO
            if($("#inputTextArea").css("display")=="none") {
                toolTip(this,"<font color='#444444'>Note:  This is not a replacement for Bulk Upload</font><br><br>On click of this button, it will display text area where user can manually enter data or copy data from excel sheet or from any editor and paste it in bulk input text area.","Bulk Input");
            } else {
                toolTip(this,"Click to hide bulk input text area.","Bulk Input");
            }
        });

我该怎么做？谢谢！

Answer 1

在 angular 中，您应该“re-thinking”使用变量。

我不知道你的工具提示，所以，假设你有一个典型的 .css

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

还有一个变量“toogle”

有些喜欢

<button (click)="toogle = !toogle">toogle</button>
<div class="tooltip">
  Hover over me
  <span *ngIf="toogle" class="tooltiptext"><b>Toogle</b> is true</span>
  <span *ngIf="!toogle" class="tooltiptext"><b>Toogle</b> is false</span>
</div>

使出“绝招”，看到你所需要的只是一个变量。这个变量使得显示一个或另一个工具提示

stackblitz

注意：您应该避免同时使用 jquery Angular

Answer 2

您可以在 angular

中 jquery 的帮助下完成

你的打字稿代码应该是这样的。,

toggleBulkInput(){

// get id of elemeneRef
// make your dynamic logic
// call enableToolTip function

}
enableToolTip(id, validationMsg): void {
    let $control;
    $control = $(id);
    $control.attr('data-original-title', validationMsg);
    $control.tooltip('show');
}

在你的内部 html 你可以调用操作方法的代码

<button type="button" id="bulkInputButton" 
    (click)="toggleBulkInput()"
    #bulkInputButton>Show
    Bulk Input</button>

通过这种方式，您可以在 angular 应用程序中实现动态工具提示

mouseenter 条件为 angular

mouseenter with condition in angular

javascript

frontend

typescript

angular2-directives

angular