如何在Angular 6中使用mouseover和mouseout [英] How to use mouseover and mouseout in Angular 6

问题描述

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

I have this older Angular code which works but not in the latest version of 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)，但是我无法成功实现.

How do i make this work for Angular 6? I understand I have to use (mouseover) and (mouseout) but I couldn't implement it successfully.

推荐答案

Angular6等效代码应为:

The Angular6 equivalent code should be:

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

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

Notice that there is no such thing as $scope anymore as it existed in AngularJS. Its been replaced with member variables from the component class. Also, there is no scope resolution algorithm based on prototypical inheritance either - it either resolves to a component class member, or it doesn't.

这篇关于如何在Angular 6中使用mouseover和mouseout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！