diff --git a/components/select/option-item.component.ts b/components/select/option-item.component.ts
index 01c76b7e780..2e6c5c1e883 100644
--- a/components/select/option-item.component.ts
+++ b/components/select/option-item.component.ts
@@ -9,23 +9,28 @@ import {
ElementRef,
EventEmitter,
Input,
+ NgZone,
OnChanges,
+ OnInit,
Output,
SimpleChanges,
TemplateRef,
ViewEncapsulation
} from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
@Component({
selector: 'nz-option-item',
template: `
- {{ label }}
-
+
-
+
+ {{ label }}
@@ -38,12 +43,11 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
'[class.ant-select-item-option-grouped]': 'grouped',
'[class.ant-select-item-option-selected]': 'selected && !disabled',
'[class.ant-select-item-option-disabled]': 'disabled',
- '[class.ant-select-item-option-active]': 'activated && !disabled',
- '(mouseenter)': 'onHostMouseEnter()',
- '(click)': 'onHostClick()'
- }
+ '[class.ant-select-item-option-active]': 'activated && !disabled'
+ },
+ providers: [NzDestroyService]
})
-export class NzOptionItemComponent implements OnChanges {
+export class NzOptionItemComponent implements OnChanges, OnInit {
selected = false;
activated = false;
@Input() grouped = false;
@@ -60,21 +64,11 @@ export class NzOptionItemComponent implements OnChanges {
@Output() readonly itemClick = new EventEmitter();
@Output() readonly itemHover = new EventEmitter();
- constructor(private elementRef: ElementRef) {
+ constructor(private elementRef: ElementRef, private ngZone: NgZone, private destroy$: NzDestroyService) {
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-select-item-option');
}
- onHostMouseEnter(): void {
- if (!this.disabled) {
- this.itemHover.next(this.value);
- }
- }
- onHostClick(): void {
- if (!this.disabled) {
- this.itemClick.next(this.value);
- }
- }
ngOnChanges(changes: SimpleChanges): void {
const { value, activatedValue, listOfSelectedValue } = changes;
if (value || listOfSelectedValue) {
@@ -84,4 +78,24 @@ export class NzOptionItemComponent implements OnChanges {
this.activated = this.compareWith(this.activatedValue, this.value);
}
}
+
+ ngOnInit(): void {
+ this.ngZone.runOutsideAngular(() => {
+ fromEvent(this.elementRef.nativeElement, 'click')
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ if (!this.disabled) {
+ this.ngZone.run(() => this.itemClick.emit(this.value));
+ }
+ });
+
+ fromEvent(this.elementRef.nativeElement, 'mouseenter')
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ if (!this.disabled) {
+ this.ngZone.run(() => this.itemHover.emit(this.value));
+ }
+ });
+ });
+ }
}