diff --git a/components/tree-view/checkbox.ts b/components/tree-view/checkbox.ts index 4fb0cb41cf..8c9346db8f 100644 --- a/components/tree-view/checkbox.ts +++ b/components/tree-view/checkbox.ts @@ -3,8 +3,21 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output +} from '@angular/core'; +import { fromEvent } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { BooleanInput } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; @@ -17,11 +30,11 @@ import { InputBoolean } from 'ng-zorro-antd/core/util'; class: 'ant-tree-checkbox', '[class.ant-tree-checkbox-checked]': `nzChecked`, '[class.ant-tree-checkbox-indeterminate]': `nzIndeterminate`, - '[class.ant-tree-checkbox-disabled]': `nzDisabled`, - '(click)': 'onClick($event)' - } + '[class.ant-tree-checkbox-disabled]': `nzDisabled` + }, + providers: [NzDestroyService] }) -export class NzTreeNodeCheckboxComponent { +export class NzTreeNodeCheckboxComponent implements OnInit { static ngAcceptInputType_nzDisabled: BooleanInput; @Input() nzChecked?: boolean; @@ -29,9 +42,25 @@ export class NzTreeNodeCheckboxComponent { @Input() @InputBoolean() nzDisabled?: boolean; @Output() readonly nzClick = new EventEmitter(); - onClick(e: MouseEvent): void { - if (!this.nzDisabled) { - this.nzClick.emit(e); - } + constructor( + private ngZone: NgZone, + private ref: ChangeDetectorRef, + private host: ElementRef, + private destroy$: NzDestroyService + ) {} + + ngOnInit(): void { + this.ngZone.runOutsideAngular(() => + fromEvent(this.host.nativeElement, 'click') + .pipe(takeUntil(this.destroy$)) + .subscribe((event: MouseEvent) => { + if (!this.nzDisabled && this.nzClick.observers.length) { + this.ngZone.run(() => { + this.nzClick.emit(event); + this.ref.markForCheck(); + }); + } + }) + ); } }