Question

我正在使用Angular 2。

当我只有一个元素时，我可以先使用nativeElement然后再使用Observable。

<div #aaa></div>

@ViewChild('aaa') private aaa: ElementRef;
ngAfterViewInit() {
  console.log(Observable.fromEvent(this.aaa.nativeElement), 'mouseenter');
}

但现在我有一个列表，我不能用同样的方式来做：

<a *ngFor="#user of users" #aaa (mouseenter)="mouseEnter($event, user)">
  {{user}}
</a>

@ViewChild('aaa') private aaa: ElementRef;
ngAfterViewInit() {
  console.log(Observable.fromEvent(this.aaa.nativeElement), 'mouseenter');
}

它将显示错误：

EXCEPTION：TypeError：无法读取null
的属性“nativeElement”

当鼠标进入每个元素时，我希望它使用Observable做不同的事情。在这种情况下如何正确使用Observable？

Answer 1

关于如何做你在这里尝试做的事情，我建议：

@Component({
  template: `
    <a *ngFor="#user of users" (mouseenter)="mouseEnters$.next({event: $event, user: user})">
    {{user}}
  </a>
  `
})
class YourComponent { 
   mouseEnters$: Subject<data:{event: MouseEvent, user: any}> = BehaviorSubject.create();

   ngAfterViewInit(){ //you don't actually need to wait for afterViewInit anymore
       this.mouseEnters$.subscribe((data:{event:MouseEvent, user: any}) => /* do whatever */)
   }
}

就你获得异常的原因而言 - 你不能在其上放置ngFor的元素上放置模板变量（当你意识到元素重复时这是有意义的。 ..），因此@ViewChild为空。

Answer 2

这取决于您希望稍后使用user或event做什么，Observable和ViewChild似乎有点矫枉过正，只需这样做：

<a *ngFor="#user of users" #aaa (mouseenter)="mouseEnter($event, user)">
  {{user}}
</a>

mouseEnter(event, user) {
  console.log(event, user);
  //do smth. i.e. this.eventEmitter.emit(user);
}

如何在列表中正确使用Observable？

2 个答案: