[解決済み] Angular 6でmouseoverとmouseoutを使用する方法

質問

古い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) が、うまく実装できませんでした。

どのように解決するのですか？

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に存在したようなことはもうありません。コンポーネントクラスのメンバ変数に置き換えられています。また、プロトタイプ継承に基づくスコープ解決アルゴリズムもありません。コンポーネントクラスのメンバーに解決されるか、されないかです。