Your directive isn't working?

Question

我有用户列表。我希望当光标悬停在按钮上时，它会将*ngIf设置为true，然后显示有关用户的信息（当光标离开按钮时为false）。

用户list.html

<div *ngFor="let user of users">
  <h1>{{user.name}}</h1>
  <div onUserHover *ngIf="ngIf">
    <p>{{user.description}}</p>
  </div>
</div>

用户list.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from 'class/user';
import { UserService } from 'user/user.service';

@Component({
  selector: 'user-list',
  templateUrl: 'user-list.component.html',
  providers: [UserService]
})
export class UserListComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService) {
  };

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers(): void {
    this.userService.getUsers().then(users => this.users = users);
  }

  toggleUser(user: User): void {
    user.active = !user.active;
  }
}

我使用了“toggleUser（user：User）”这样的 - ＆gt; （点击）='toggleUser（用户）'但我现在想要一个onHover而不是点击。

我在Angular.io网站上看到了关于指令属性的教程，在HostBinding（'ngIf'）上看到了一个stackOverflow主题。

Hostbinding ngIf in Angular2

onUserHover.directive.ts

 import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({ selector: '[onUserHover]' })
export class OnUserHoverDirective {

    constructor(private el: ElementRef) {
    }

    @HostBinding('ngIf') ngIf: boolean;

    @HostListener('mouseenter') onMouseEnter() {
        console.log('onMouseEnter');
        this.ngIf = true;
    }

    @HostListener('mouseleave') onmouseleave() {
        this.ngIf = false;
    }
}

但我在浏览器上有一个错误：

Can't bind to `ngIf` since it isn't a known property of `div`

如何以Angular2风格实现此功能？

Answer 1

您忘记的是将变量绑定到元素

<div onUserHover [ngIf]="ngif" *ngIf="ngIf">

Your directive isn't working?

您是否记得将该指令添加到声明属性中   @NgModule？很容易忘记！在浏览器工具中打开控制台   并寻找这样的错误：

EXCEPTION：模板解析错误：无法绑定到“myHighlight”＆＃39;以来   它不是“p＆＃39;。
的已知属性。”
Angular会检测到您正在尝试绑定某些内容但它无法绑定   在模块的声明数组中找到此指令。后   Angular知道，在声明数组中指定HighlightDirective   它可以将指令应用于此模块中声明的组件。

Angular2 - 使用NgFor元素进行HostListener /绑定

1 个答案:

Your directive isn't working?