如何在Angular 6中使用mouseover和mouseout

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;
    }
}

请注意,$scopeAngularJS中不存在这样的东西.它已被组件类中的成员变量替换.此外,没有基于原型继承的范围解析算法 - 它既可以解析为组件类成员,也可以不解析.

Answer 2

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 3

除了已经说过的内容。

如果要添加*ngFor一个元素，并在其中隐藏\显示元素，则就像您在注释中添加的那样，将鼠标悬停在该元素上时，应重新考虑整个概念。

一种更合适的方法，根本不涉及角度。我将使用纯CSS的本机:hover属性来代替它。

就像是：

App.Component.css

div span.only-show-on-hover {
    visibility: hidden;
}
div:hover span.only-show-on-hover  {
    visibility: visible;
}

App.Component.html

  <div *ngFor="let i of [1,2,3,4]" > hover me please.
    <span class="only-show-on-hover">you only see me when hovering</span>
  </div>

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