Как использовать мышь и мышь в Angular 6

У меня этот старый угловой код, который работает, но не в последней версии 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) но я не смог реализовать его успешно.

Ответ 1

Угловой эквивалентный код должен быть:

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;
    }
}

Обратите внимание, что в AnguleJS нет такой вещи, как $scope, как это было в AngularJS. Его заменили на переменные-члены из класса компонентов. Кроме того, не существует алгоритма разрешения разрешающей способности, основанного на прототипическом наследовании, либо он либо решает член класса компонента, либо нет.

Ответ 2

Добавление к тому, что уже было сказано.

если вы хотите *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

  <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

Ответ 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>

Ответ 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 в любом месте шаблона, чтобы получить доступ к этому свойству.

Ответ 5

To avoid blinking problem use following code

**app.component.html**

    <div (mouseenter)="changeText=true" (mouseLeave)="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;
    }
}