如何在Angular6中使用mouseover和mouseout

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

  Hide
  Show

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

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中不存在这样的东西.它已被组件类中的成员变量替换.此外,没有基于原型继承的范围解析算法 - 它既可以解析为组件类成员,也可以不解析.

除了已经说过的内容。

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