angular - 在 Angular 6中,如何使用mouseover和 mouseout

  显示原文与译文双语对照的内容
125 4

我有这个较旧的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),但我无法成功实现。

时间:

139 0

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;


 }


}



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

137 1

添加到已经说过的内容。

如果你想要 *ngFor,并隐藏显示元素,就像在注释中添加的那样,你应该认为整个概念。

一个更合适的方法,不涉及 Angular 。 我将使用纯 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

56 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>



143 4

如果你感兴趣,则使用指令属性。 代码可能看起来有点困难,但它显示了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'即可访问这里属性。

...