fix(module:segmented): fix emitting unnecessary value changed events (#9125)

Author: HyperLife1119

components/segmented/segmented-item.component.ts

@@ -15,7 +15,7 @@ import {
   OnInit,
   ViewEncapsulation
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { filter, map, switchMap, take, tap } from 'rxjs/operators';
 
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -46,7 +46,7 @@ import { NzSegmentedService } from './segmented.service';
   host: {
     class: 'ant-segmented-item',
     '[class.ant-segmented-item-selected]': 'isChecked',
-    '[class.ant-segmented-item-disabled]': 'nzDisabled',
+    '[class.ant-segmented-item-disabled]': 'nzDisabled || parentDisabled()',
     '(click)': 'handleClick()'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -61,16 +61,13 @@ export class NzSegmentedItemComponent implements OnInit {
 
   private readonly service = inject(NzSegmentedService);
 
+  readonly parentDisabled = toSignal(this.service.disabled$, { initialValue: false });
+
   constructor(
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
     private destroyRef: DestroyRef
-  ) {
-    this.service.disabled$.pipe(takeUntilDestroyed()).subscribe(disabled => {
-      this.nzDisabled = disabled;
-      this.cdr.markForCheck();
-    });
-  }
+  ) {}
 
   ngOnInit(): void {
     this.service.selected$
@@ -99,8 +96,9 @@ export class NzSegmentedItemComponent implements OnInit {
   }
 
   handleClick(): void {
-    if (!this.nzDisabled) {
+    if (!this.nzDisabled && !this.parentDisabled()) {
       this.service.selected$.next(this.nzValue);
+      this.service.change$.next(this.nzValue);
     }
   }
 }

components/segmented/segmented.component.ts

@@ -115,6 +115,9 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
 
     this.service.selected$.pipe(takeUntilDestroyed()).subscribe(value => {
       this.value = value;
+    });
+
+    this.service.change$.pipe(takeUntilDestroyed()).subscribe(value => {
       this.nzValueChange.emit(value);
       this.onChange(value);
     });
@@ -141,8 +144,7 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
       }
 
       if (
-        this.value === null ||
-        this.value === undefined ||
+        this.value === undefined || // If no value is set, select the first item
         !itemCmps.some(item => item.nzValue === this.value) // handle value not in options
       ) {
         this.service.selected$.next(itemCmps[0].nzValue);
@@ -168,7 +170,6 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
   }
 
   writeValue(value: number | string): void {
-    if (value === null || value === undefined) return;
     this.service.selected$.next(value);
   }
 

components/segmented/segmented.service.ts

@@ -11,12 +11,14 @@ import { ReplaySubject, Subject } from 'rxjs';
 export class NzSegmentedService implements OnDestroy {
   readonly selected$ = new ReplaySubject<string | number>(1);
   readonly activated$ = new ReplaySubject<HTMLElement>(1);
+  readonly change$ = new Subject<string | number>();
   readonly disabled$ = new ReplaySubject<boolean>(1);
   readonly animationDone$ = new Subject<AnimationEvent>();
 
   ngOnDestroy(): void {
     this.selected$.complete();
     this.activated$.complete();
+    this.change$.complete();
     this.disabled$.complete();
     this.animationDone$.complete();
   }

components/segmented/segmented.spec.ts

@@ -4,7 +4,7 @@
  */
 
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -32,87 +32,159 @@ describe('nz-segmented', () => {
       });
       fixture = TestBed.createComponent(NzSegmentedTestComponent);
       component = fixture.componentInstance;
+      spyOn(component, 'handleValueChange');
       segmentedComponent = fixture.debugElement.query(By.directive(NzSegmentedComponent));
       fixture.detectChanges();
     });
 
     it('should support block mode', () => {
-      expect((segmentedComponent.nativeElement as HTMLElement).classList.contains('ant-segmented-block')).toBeFalse();
+      const segmentedElement: HTMLElement = segmentedComponent.nativeElement;
+      expect(segmentedElement.classList).not.toContain('ant-segmented-block');
       component.block = true;
       fixture.detectChanges();
-      expect((segmentedComponent.nativeElement as HTMLElement).classList.contains('ant-segmented-block')).toBeTrue();
+      expect(segmentedElement.classList).toContain('ant-segmented-block');
     });
 
-    it('should be auto selected the first option', async () => {
+    it('should support size', () => {
+      const segmentedElement: HTMLElement = segmentedComponent.nativeElement;
+      component.size = 'large';
+      fixture.detectChanges();
+      expect(segmentedElement.classList).toContain('ant-segmented-lg');
+      component.size = 'small';
+      fixture.detectChanges();
+      expect(segmentedElement.classList).toContain('ant-segmented-sm');
+    });
+
+    it('should be auto selected the first option when if no value is set', async () => {
       const theFirstElement = getSegmentedOptionByIndex(0);
       await fixture.whenStable();
       fixture.detectChanges();
-      expect(component.value).toBe(1);
-      expect(theFirstElement.classList.contains('ant-segmented-item-selected')).toBeTrue();
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
     });
 
-    it('should emit when value changes', fakeAsync(() => {
-      spyOn(component, 'handleValueChange');
-
+    it('should be change the value and emit an event by clicking', async () => {
       const theFirstElement = getSegmentedOptionByIndex(0);
-      const theThirdElement = getSegmentedOptionByIndex(2);
-      dispatchMouseEvent(theThirdElement.querySelector('.ant-segmented-item-label')!, 'click');
+      const theSecondElement = getSegmentedOptionByIndex(1);
+
+      await fixture.whenStable();
       fixture.detectChanges();
-      tick(400);
+
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(component.handleValueChange).toHaveBeenCalledTimes(0);
+
+      dispatchMouseEvent(theSecondElement, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      expect(component.value).toBe(3);
-      expect(theFirstElement.classList.contains('ant-segmented-item-selected')).toBeFalse();
-      expect(theThirdElement.classList.contains('ant-segmented-item-selected')).toBeTrue();
-      expect(component.handleValueChange).toHaveBeenCalledWith(3);
+
+      expect(theFirstElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).toContain('ant-segmented-item-selected');
       expect(component.handleValueChange).toHaveBeenCalledTimes(1);
+      expect(component.handleValueChange).toHaveBeenCalledWith(2);
+    });
 
-      component.value = 2;
+    it('should support object options', async () => {
+      component.options = [
+        'Daily',
+        { label: 'Weekly', value: 'Weekly', disabled: true },
+        'Monthly',
+        { label: 'Quarterly', value: 'Quarterly', disabled: true },
+        'Yearly'
+      ];
       fixture.detectChanges();
-      tick(400);
+      await fixture.whenStable();
       fixture.detectChanges();
+
+      const theFirstElement = getSegmentedOptionByIndex(0);
       const theSecondElement = getSegmentedOptionByIndex(1);
-      expect(segmentedComponent.componentInstance.value).toBe(2);
-      expect(component.handleValueChange).toHaveBeenCalledTimes(2);
-      expect(theSecondElement.classList.contains('ant-segmented-item-selected')).toBeTrue();
-    }));
+      const theThirdElement = getSegmentedOptionByIndex(2);
 
-    it('should support disabled mode', fakeAsync(() => {
-      component.disabled = true;
-      fixture.detectChanges();
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
 
-      const theThirdElement = getSegmentedOptionByIndex(2);
-      dispatchMouseEvent(theThirdElement.querySelector('.ant-segmented-item-label')!, 'click');
+      dispatchMouseEvent(theSecondElement, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      tick(400);
+
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
+
+      dispatchMouseEvent(theThirdElement, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      expect(component.value).toBe(1);
 
-      component.disabled = false;
+      expect(theFirstElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(theThirdElement.classList).toContain('ant-segmented-item-selected');
+    });
+
+    it('should support disabled mode', async () => {
+      const theFirstElement = getSegmentedOptionByIndex(0);
+      const theSecondElement = getSegmentedOptionByIndex(1);
+
+      component.disabled = true;
       fixture.detectChanges();
-      dispatchMouseEvent(theThirdElement.querySelector('.ant-segmented-item-label')!, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      tick(400);
+
+      dispatchMouseEvent(theSecondElement, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      expect(component.value).toBe(3);
 
-      component.options = [
-        'Daily',
-        { label: 'Weekly', value: 'Weekly', disabled: true },
-        'Monthly',
-        { label: 'Quarterly', value: 'Quarterly', disabled: true },
-        'Yearly'
-      ];
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
+    });
+  });
+
+  describe('ng model', () => {
+    let fixture: ComponentFixture<NzSegmentedNgModelTestComponent>;
+    let component: NzSegmentedNgModelTestComponent;
+    let segmentedComponent: DebugElement;
+
+    function getSegmentedOptionByIndex(index: number): HTMLElement {
+      return segmentedComponent.nativeElement.querySelectorAll('.ant-segmented-item')[index];
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [provideNoopAnimations()]
+      });
+      fixture = TestBed.createComponent(NzSegmentedNgModelTestComponent);
+      component = fixture.componentInstance;
+      spyOn(component, 'handleValueChange');
+      segmentedComponent = fixture.debugElement.query(By.directive(NzSegmentedComponent));
       fixture.detectChanges();
+    });
 
+    it('should be support two-way binding', async () => {
+      const theFirstElement = getSegmentedOptionByIndex(0);
       const theSecondElement = getSegmentedOptionByIndex(1);
-      dispatchMouseEvent(theSecondElement.querySelector('.ant-segmented-item-label')!, 'click');
+
+      await fixture.whenStable();
       fixture.detectChanges();
-      tick(400);
+
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(component.handleValueChange).toHaveBeenCalledTimes(0);
+
+      component.value = 2;
+      fixture.detectChanges();
+      await fixture.whenStable();
       fixture.detectChanges();
-      expect(component.value).toBe('Daily');
-    }));
+
+      expect(theFirstElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).toContain('ant-segmented-item-selected');
+      expect(component.handleValueChange).toHaveBeenCalledTimes(0);
+
+      dispatchMouseEvent(theFirstElement, 'click');
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(component.value).toBe(1);
+      expect(component.handleValueChange).toHaveBeenCalledTimes(1);
+    });
   });
-  describe('in reactive form', () => {
+
+  describe('reactive form', () => {
     let fixture: ComponentFixture<NzSegmentedInReactiveFormTestComponent>;
     let component: NzSegmentedInReactiveFormTestComponent;
     let segmentedComponent: DebugElement;
@@ -131,16 +203,19 @@ describe('nz-segmented', () => {
       fixture.detectChanges();
     });
 
-    it('first change form control value should work', fakeAsync(() => {
-      expect(component.formControl.value).toBe('Weekly');
+    it('first change form control value should work', async () => {
+      const theSecondElement = getSegmentedOptionByIndex(1);
       const theThirdElement = getSegmentedOptionByIndex(2);
-      dispatchMouseEvent(theThirdElement.querySelector('.ant-segmented-item-label')!, 'click');
-      tick(400);
+
+      expect(component.formControl.value).toBe('Weekly');
+
+      dispatchMouseEvent(theThirdElement, 'click');
+      await fixture.whenStable();
       fixture.detectChanges();
-      const theSecondElement = getSegmentedOptionByIndex(1);
-      expect(theSecondElement.classList.contains('ant-segmented-item-selected')).toBeFalse();
-      expect(theThirdElement.classList.contains('ant-segmented-item-selected')).toBeTrue();
-    }));
+
+      expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(theThirdElement.classList).toContain('ant-segmented-item-selected');
+    });
   });
 });
 
@@ -150,7 +225,6 @@ describe('nz-segmented', () => {
     <nz-segmented
       [nzSize]="size"
       [nzOptions]="options"
-      [(ngModel)]="value"
       [nzDisabled]="disabled"
       [nzBlock]="block"
       (nzValueChange)="handleValueChange($event)"
@@ -160,7 +234,6 @@ describe('nz-segmented', () => {
 export class NzSegmentedTestComponent {
   size: NzSizeLDSType = 'default';
   options: NzSegmentedOptions = [1, 2, 3];
-  value?: number | string;
   block = false;
   disabled = false;
 
@@ -169,6 +242,19 @@ export class NzSegmentedTestComponent {
   }
 }
 
+@Component({
+  imports: [FormsModule, NzSegmentedModule],
+  template: ` <nz-segmented [nzOptions]="options" [(ngModel)]="value" (ngModelChange)="handleValueChange($event)" /> `
+})
+export class NzSegmentedNgModelTestComponent {
+  options: NzSegmentedOptions = [1, 2, 3];
+  value: number | string = 1;
+
+  handleValueChange(_e: string | number): void {
+    // empty
+  }
+}
+
 @Component({
   imports: [ReactiveFormsModule, NzSegmentedModule],
   template: `<nz-segmented [nzOptions]="options" [formControl]="formControl"></nz-segmented>`