Question

我有一个用户列表。当我将鼠标移到每个用户上时，我想显示一个迷你个人资料。

@Directive({
  selector: '[mini-profile-directive]',
  host: {
    '(mouseenter)': 'onMouseEnter($event)'
  }
})
export class MiniProfileDirective {
  private mouseEnter = new EventEmitter();

  onMouseEnter($event) {}
}

当我使用时，我会这样使用：

<div *ngFor="let user of users" mini-profile-directive><div>

然而，我想展示一些东西，指令无法表现出来。

所以我创建了一个组件。

@Component({
  selector: '[mini-profile-component]',
  host: {
    '(mouseenter)': 'onMouseEnter($event)'
  },
  template: ``
})
export class MiniProfileComponent {
  private mouseEnter = new EventEmitter();

  onMouseEnter($event) {
    // here won't run!
  }
}

然后像这样使用，这是错误的。

<div *ngFor="let user of users" mini-profile-component></div>

我想到的一种方法是同时拥有MiniProfileDirective和MiniProfileComponent

<div *ngFor="let user of users" mini-profile-directive><div>
<mini-profile-component></mini-profile-component>

在MiniProfileDirective内，使用服务来控制MiniProfileComponent的显示/隐藏。

有更好的方法吗？感谢

Answer 1

<强>更新

Example hovered profile component

<强>来源

作为host绑定的替代方法，您可以使用listen类的Renderer方法，如下所示：

constructor(elementRef: ElementRef, renderer: Renderer) {
  renderer.listen(elementRef.nativeElement, 'mouseenter', (e) => this.onMouseEnter(e))
}

查看work plunkr http://plnkr.co/edit/OPgHQKwlfJ2B46dgdUZH?p=preview

在Angular 2中悬停迷你型材

1 个答案: