11赞
598
当前位置:  开发笔记 > 编程语言 > 正文

如何在Angular6中使用mouseover和mouseout

如何解决《如何在Angular6中使用mouseover和mouseout》经验,为你挑选了2个好方法。

我有这个较旧的Angular代码,但在Angular 6的最新版本中没有.

Hide Show

我如何为Angular 6做这项工作?我知道我必须使用(mouseover),(mouseout)但我无法成功实现它.



1> pixelbits..:

Angular6等效代码应该是:

app.component.html

Hide Show

app.component.ts

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

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



2> Stavm..:

除了已经说过的内容。

如果要添加*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

  
hover me please. you only see me when hovering

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


推荐阅读
author-avatar
奔三人2502933897
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有