fix(module:avatar): calculate size at the right time (#8754)

Author: HyperLife1119

components/avatar/avatar.component.ts

@@ -5,7 +5,6 @@
 
 import { PlatformModule } from '@angular/cdk/platform';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -16,6 +15,7 @@ import {
   Output,
   ViewChild,
   ViewEncapsulation,
+  afterRender,
   numberAttribute
 } from '@angular/core';
 
@@ -33,11 +33,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
   template: `
     @if (nzIcon && hasIcon) {
       <span nz-icon [nzType]="nzIcon"></span>
-    }
-    @if (nzSrc && hasSrc) {
+    } @else if (nzSrc && hasSrc) {
       <img [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)" />
-    }
-    @if (nzText && hasText) {
+    } @else if (nzText && hasText) {
       <span class="ant-avatar-string" #textEl>{{ nzText }}</span>
     }
   `,
@@ -59,7 +57,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class NzAvatarComponent implements OnChanges, AfterViewInit {
+export class NzAvatarComponent implements OnChanges {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   @Input() @WithConfig() nzShape: NzShapeSCType = 'circle';
   @Input() @WithConfig() nzSize: NzSizeLDSType | number = 'default';
@@ -85,7 +83,9 @@ export class NzAvatarComponent implements OnChanges, AfterViewInit {
     public nzConfigService: NzConfigService,
     private elementRef: ElementRef,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    afterRender(() => this.calcStringSize());
+  }
 
   imgError($event: Event): void {
     this.nzError.emit($event);
@@ -113,10 +113,6 @@ export class NzAvatarComponent implements OnChanges, AfterViewInit {
     this.calcStringSize();
   }
 
-  ngAfterViewInit(): void {
-    this.calcStringSize();
-  }
-
   private calcStringSize(): void {
     if (!this.hasText || !this.textEl) {
       return;

components/avatar/avatar.spec.ts

@@ -137,7 +137,7 @@ describe('avatar', () => {
       context.nzText = 'LongUsername';
       fixture.detectChanges();
       tick();
-      context.comp.ngAfterViewInit();
+      context.comp['calcStringSize']();
       const scale = getScaleFromCSSTransform(dl.nativeElement.querySelector('.ant-avatar-string')!.style.transform!);
       expect(scale).toBeLessThan(1);
     }));
@@ -151,7 +151,7 @@ describe('avatar', () => {
         fixture.detectChanges();
         tick();
         avatarText = dl.nativeElement.querySelector('.ant-avatar-string')!;
-        context.comp.ngAfterViewInit();
+        context.comp['calcStringSize']();
         firstScale = getScaleFromCSSTransform(avatarText.style.transform);
       }));
 
@@ -237,7 +237,7 @@ describe('avatar', () => {
       fixture.detectChanges();
       flush();
       const textEl = document.querySelector<HTMLElement>('.ant-avatar-string')!;
-      context.comp.ngAfterViewInit();
+      context.comp['calcStringSize']();
       const scale = getScaleFromCSSTransform(textEl.style.transform);
       expect(scale).toBeLessThan(1);
       expect(textEl.style.lineHeight).toEqual(`${size}px`);