4

I am using Angular 2.

When I have only one element, I can use nativeElement first and then use Observable.

<div #aaa></div>

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

But now I have a list, I cannot use same way to do it:

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

It will show the error:

EXCEPTION: TypeError: Cannot read property 'nativeElement' of null

When the mouses move into each element, I want it does different things using Observable. How can I correctly use Observable in this case?

4

2 回答 2

5

至于如何做你想做的事情，我建议：

@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是无效的。

于 2016-04-17T06:32:29.550 回答
0

这取决于你以后想用useror做什么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);
}
于 2016-04-17T13:15:05.830 回答