Question

我有这个较旧的Angular代码，但在最新版本的Angular 6中无法使用。

<div ng-mouseover="changeText=true" ng-mouseleave="changeText=false" ng-init="changeText=false">
  <span ng-hide="changeText">Hide</span>
  <span ng-show="changeText">Show</span>
</div>

我如何使它适用于Angular 6？我了解我必须使用(mouseover)和(mouseout)，但无法成功实现。

Answer 1

等效Angular6的代码应为：

app.component.html

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

app.component.ts

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

请注意，AngularJS中不再存在$scope这样的东西。它已被组件类中的成员变量替换。此外，也没有基于原型继承的范围解析算法-它要么解析为组件类成员，要么不解析。

Answer 2

增加了已经说过的话。

如果您想.xlsm元素并在其中隐藏\ show元素，就像您在注释中添加的那样，悬停时，您应该重新考虑整个概念。

一种更合适的方法，根本不涉及角度。我会改用纯CSS，而是使用其原生EPPlus属性。

类似：

App.Component.css

 private static final String TIME_AM = "AM";
 private static final String TIME_PM = "PM";

private void setSpinnerValue(String dataBaseValue)
    {
        if(dataBaseValue.equalsIgnoreCase(TIME_AM)) // IF Data base value is AM select position as 0
        {
            ampmspin.setSelection(0);
        }
        else if(dataBaseValue.equalsIgnoreCase(TIME_PM)) // IF Data base value is PM select position as 1
        {
            ampmspin.setSelection(1);
        }
        else // IF no data in database then we need keep 0 as default
        {
            ampmspin.setSelection(0);
        }
    }

App.Component.html

*ngFor

添加了一个演示：https://stackblitz.com/edit/hello-angular-6-hvgx7n?file=src%2Fapp%2Fapp.component.html

Answer 3

您可以使用(mouseover)和(mouseout)事件。

component.ts

changeText:boolean=true;

component.html

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span [hidden]="changeText">Hide</span>
  <span [hidden]="!changeText">Show</span>
</div>

Answer 4

CSS解决方案可以正常工作！

https://www.w3schools.com/code/tryit.asp?filename=GJ4PCJMVQ4LN https://www.w3schools.com/code/tryit.asp?filename=GJ4PPLCCEBRG

.col-info:hover>.popoverIcon {
    visibility: visible;
  }
}

.popoverIcon {
  visibility: hidden;
}

<div *ngFor="let i of [1,2,3,4]">

  <div class="col-info">
    <span class=" popoverIcon ">Show {{i}}</span>
  </div>

</div>

Answer 5

如果您有兴趣，请使用指令属性。代码可能看起来有些棘手，但它显示了Angular 6的所有属性。在这里添加示例代码

import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
import { MockNgModuleResolver } from '@angular/compiler/testing';
//import { Event } from '@angular/router';

@Directive({
  selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {
   defaultcolor :string = 'black'
   Highlightedcolor : string = 'red'
    @HostBinding('style.color') color : string = this.defaultcolor;

  constructor(private elm : ElementRef , private render:Renderer2) { }
ngOnInit()
{}
@HostListener('mouseenter') mouseover(event :Event)
{

  this.color= this.Highlightedcolor ;
}
@HostListener('mouseleave') mouseleave(event: Event)
{

  this.color = this.defaultcolor;
}
}

只需在模板中的任何位置使用选择器名称'appBetterHighlight'即可访问此属性。

Answer 6

To avoid blinking problem use following code
its not mouseover and mouseout instead of that use mouseenter and mouseleave


**app.component.html**

    <div (mouseenter)="changeText=true" (mouseLeave)="changeText=false">
      <span *ngIf="!changeText">Hide</span>
      <span *ngIf="changeText">Show</span>
    </div>

**app.component.ts**

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

Answer 7

<div (mouseenter)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

，如果要在* ngFor中使用，则分配悬停数据的对象值，然后检查其ID并显示悬停信息/图标或类似内容：-

 <div (mouseenter)="hoverCard(d)" (mouseleave)="hoverCard(null)" *ngFor="let d of data" class="col-lg-3 col-md-4 col-sm-6 mt-4">
   <a *ngIf="hoverData && hoverData.id == d.id" class="text-right"><i class="fas fa-edit"></i>Hover Text</a>
    Normal Text
  </div>

在TS文件中

  hoverData!:Data|null;

  hoverCard(d: Data|null){
    this.hoverData = sCatg;
  }

Answer 8

在HTML中：

<div (mouseover)="funcName1() (mouseout)="funcName2()">
   // Do what you want 
</div>

在TypeScript中：

funcName1(){
 //Do Something
}
funcName2(){
//Do Something
}

如何在Angular 6中使用mouseover和mouseout

8 个答案: