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'即可访问这里属性。

...