refactor(module:*): use inject function to simplify code (#8073)

components/i18n/date-config.ts

@@ -18,6 +18,6 @@ export const NZ_DATE_CONFIG_DEFAULT: NzDateConfig = {
   firstDayOfWeek: undefined
 };
 
-export function mergeDateConfig(config: NzDateConfig): NzDateConfig {
+export function mergeDateConfig(config: NzDateConfig | null): NzDateConfig {
   return { ...NZ_DATE_CONFIG_DEFAULT, ...config };
 }

components/i18n/date-helper.service.ts

@@ -4,17 +4,18 @@
  */
 
 import { formatDate } from '@angular/common';
-import { Inject, Injectable, Injector, Optional } from '@angular/core';
+import { Inject, Injectable, Optional, inject } from '@angular/core';
 
 import { format as fnsFormat, getISOWeek as fnsGetISOWeek, parse as fnsParse } from 'date-fns';
 
 import { WeekDayIndex, ɵNgTimeParser } from 'ng-zorro-antd/core/time';
 
-import { mergeDateConfig, NzDateConfig, NZ_DATE_CONFIG } from './date-config';
+import { NZ_DATE_CONFIG, NzDateConfig, mergeDateConfig } from './date-config';
 import { NzI18nService } from './nz-i18n.service';
 
-export function DATE_HELPER_SERVICE_FACTORY(injector: Injector, config: NzDateConfig): DateHelperService {
-  const i18n = injector.get(NzI18nService);
+export function DATE_HELPER_SERVICE_FACTORY(): DateHelperService {
+  const i18n = inject(NzI18nService);
+  const config = inject(NZ_DATE_CONFIG, { optional: true });
   return i18n.getDateLocale() ? new DateHelperByDateFns(i18n, config) : new DateHelperByDatePipe(i18n, config);
 }
 
@@ -24,12 +25,13 @@ export function DATE_HELPER_SERVICE_FACTORY(injector: Injector, config: NzDateCo
  */
 @Injectable({
   providedIn: 'root',
-  useFactory: DATE_HELPER_SERVICE_FACTORY,
-  deps: [Injector, [new Optional(), NZ_DATE_CONFIG]]
+  useFactory: DATE_HELPER_SERVICE_FACTORY
 })
 export abstract class DateHelperService {
-  constructor(protected i18n: NzI18nService, @Optional() @Inject(NZ_DATE_CONFIG) protected config: NzDateConfig) {
-    this.config = mergeDateConfig(this.config);
+  protected config: NzDateConfig;
+
+  constructor(protected i18n: NzI18nService, @Optional() @Inject(NZ_DATE_CONFIG) config: NzDateConfig | null) {
+    this.config = mergeDateConfig(config);
   }
 
   abstract getISOWeek(date: Date): number;

components/menu/menu-group.component.ts

@@ -10,18 +10,18 @@ import {
   ElementRef,
   Inject,
   Input,
-  Optional,
   Renderer2,
-  SkipSelf,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 
 import { NzIsMenuInsideDropDownToken } from './menu.token';
 
-export function MenuGroupFactory(isMenuInsideDropDownToken: boolean): boolean {
-  return isMenuInsideDropDownToken ? isMenuInsideDropDownToken : false;
+export function MenuGroupFactory(): boolean {
+  const isMenuInsideDropDownToken = inject(NzIsMenuInsideDropDownToken, { optional: true, skipSelf: true });
+  return isMenuInsideDropDownToken ?? false;
 }
 @Component({
   selector: '[nz-menu-group]',
@@ -31,8 +31,7 @@ export function MenuGroupFactory(isMenuInsideDropDownToken: boolean): boolean {
     /** check if menu inside dropdown-menu component **/
     {
       provide: NzIsMenuInsideDropDownToken,
-      useFactory: MenuGroupFactory,
-      deps: [[new SkipSelf(), new Optional(), NzIsMenuInsideDropDownToken]]
+      useFactory: MenuGroupFactory
     }
   ],
   encapsulation: ViewEncapsulation.None,

components/menu/menu.directive.ts

@@ -19,7 +19,7 @@ import {
   Output,
   QueryList,
   SimpleChanges,
-  SkipSelf
+  inject
 } from '@angular/core';
 import { BehaviorSubject, Subject, combineLatest } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -33,14 +33,15 @@ import { NzIsMenuInsideDropDownToken, NzMenuServiceLocalToken } from './menu.tok
 import { NzMenuModeType, NzMenuThemeType } from './menu.types';
 import { NzSubMenuComponent } from './submenu.component';
 
-export function MenuServiceFactory(
-  serviceInsideDropDown: MenuService,
-  serviceOutsideDropDown: MenuService
-): MenuService {
-  return serviceInsideDropDown ? serviceInsideDropDown : serviceOutsideDropDown;
+export function MenuServiceFactory(): MenuService {
+  const serviceInsideDropDown = inject(MenuService, { skipSelf: true, optional: true });
+  const serviceOutsideDropDown = inject(NzMenuServiceLocalToken);
+  return serviceInsideDropDown ?? serviceOutsideDropDown;
 }
-export function MenuDropDownTokenFactory(isMenuInsideDropDownToken: boolean): boolean {
-  return isMenuInsideDropDownToken ? isMenuInsideDropDownToken : false;
+
+export function MenuDropDownTokenFactory(): boolean {
+  const isMenuInsideDropDownToken = inject(NzIsMenuInsideDropDownToken, { skipSelf: true, optional: true });
+  return isMenuInsideDropDownToken ?? false;
 }
 
 @Directive({
@@ -54,14 +55,12 @@ export function MenuDropDownTokenFactory(isMenuInsideDropDownToken: boolean): bo
     /** use the top level service **/
     {
       provide: MenuService,
-      useFactory: MenuServiceFactory,
-      deps: [[new SkipSelf(), new Optional(), MenuService], NzMenuServiceLocalToken]
+      useFactory: MenuServiceFactory
     },
     /** check if menu inside dropdown-menu component **/
     {
       provide: NzIsMenuInsideDropDownToken,
-      useFactory: MenuDropDownTokenFactory,
-      deps: [[new SkipSelf(), new Optional(), NzIsMenuInsideDropDownToken]]
+      useFactory: MenuDropDownTokenFactory
     }
   ],
   host: {

components/tree-select/tree-select.component.ts

@@ -19,15 +19,13 @@ import {
   ElementRef,
   EventEmitter,
   Host,
-  Injector,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   Output,
   Renderer2,
-  Self,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -46,7 +44,6 @@ import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
 import {
   NzFormatEmitEvent,
   NzTreeBase,
-  NzTreeBaseService,
   NzTreeHigherOrderServiceToken,
   NzTreeNode,
   NzTreeNodeOptions
@@ -67,10 +64,6 @@ import { NzTreeComponent } from 'ng-zorro-antd/tree';
 
 import { NzTreeSelectService } from './tree-select.service';
 
-export function higherOrderServiceFactory(injector: Injector): NzTreeBaseService {
-  return injector.get(NzTreeSelectService);
-}
-
 export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | '';
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'treeSelect';
 const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown';
@@ -215,8 +208,7 @@ const listOfPositions = [
     NzTreeSelectService,
     {
       provide: NzTreeHigherOrderServiceToken,
-      useFactory: higherOrderServiceFactory,
-      deps: [[new Self(), Injector]]
+      useExisting: NzTreeSelectService
     },
     {
       provide: NG_VALUE_ACCESSOR,

components/tree/tree.component.ts

@@ -20,10 +20,10 @@ import {
   Optional,
   Output,
   SimpleChange,
-  SkipSelf,
   TemplateRef,
   ViewChild,
-  forwardRef
+  forwardRef,
+  inject
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
@@ -48,11 +48,10 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { NzTreeService } from './tree.service';
 
-export function NzTreeServiceFactory(
-  higherOrderService: NzTreeBaseService,
-  treeService: NzTreeService
-): NzTreeBaseService {
-  return higherOrderService ? higherOrderService : treeService;
+export function NzTreeServiceFactory(): NzTreeBaseService {
+  const higherOrderService = inject(NzTreeHigherOrderServiceToken, { skipSelf: true, optional: true });
+  const treeService = inject(NzTreeService);
+  return higherOrderService ?? treeService;
 }
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'tree';
@@ -148,8 +147,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'tree';
     NzTreeService,
     {
       provide: NzTreeBaseService,
-      useFactory: NzTreeServiceFactory,
-      deps: [[new SkipSelf(), new Optional(), NzTreeHigherOrderServiceToken], NzTreeService]
+      useFactory: NzTreeServiceFactory
     },
     {
       provide: NG_VALUE_ACCESSOR,

docs/global-config.en-US.md

@@ -73,12 +73,9 @@ export class GlobalTemplatesComponent {
 }
 
 // The Factory function
-const nzConfigFactory = (
-  injector: Injector,
-  resolver: ComponentFactoryResolver
-): NzConfig => {
-  const factory = resolver.resolveComponentFactory(GlobalTemplatesComponent);
-  const { nzIndicator } = factory.create(injector).instance;
+const nzConfigFactory = (): NzConfig => {
+  const environmentInjector = inject(EnvironmentInjector);
+  const { nzIndicator } = createComponent(component, { environmentInjector }).instance;
   return {
     spin: {
       nzIndicator
@@ -95,8 +92,7 @@ const nzConfigFactory = (
   providers: [
     { // The FactoryProvider
       provide: NZ_CONFIG,
-      useFactory: nzConfigFactory,
-      deps: [Injector, ComponentFactoryResolver]
+      useFactory: nzConfigFactory
     }
   ]
 })
@@ -136,8 +132,9 @@ You can also use `useFactory` to combine the global configuration with the local
     NzConfigService,
     {
       provide: NZ_CONFIG,
-      useFactory: (nzConfigService: NzConfigService) => {
-        const globalConfig = nzConfigService.getConfig();
+      useFactory: () => {
+        // get global NzConfigService
+        const globalConfig = inject(NzConfigService, { skipSelf: true }).getConfig();
         const localConfig = {
           select: {
             nzBorderless: true
@@ -150,8 +147,6 @@ You can also use `useFactory` to combine the global configuration with the local
         };
         return mergedConfig;
       },
-      // get global NzConfigService
-      deps: [[new SkipSelf(), NzConfigService]]
     }
   ]
 })

docs/global-config.zh-CN.md

@@ -74,12 +74,9 @@ export class GlobalTemplatesComponent {
 }
 
 // The Factory function
-const nzConfigFactory = (
-  injector: Injector,
-  resolver: ComponentFactoryResolver
-): NzConfig => {
-  const factory = resolver.resolveComponentFactory(GlobalTemplatesComponent);
-  const { nzIndicator } = factory.create(injector).instance;
+const nzConfigFactory = (): NzConfig => {
+  const environmentInjector = inject(EnvironmentInjector);
+  const { nzIndicator } = createComponent(component, { environmentInjector }).instance;
   return {
     spin: {
       nzIndicator
@@ -96,8 +93,7 @@ const nzConfigFactory = (
   providers: [
     { // The FactoryProvider
       provide: NZ_CONFIG,
-      useFactory: nzConfigFactory,
-      deps: [Injector, ComponentFactoryResolver]
+      useFactory: nzConfigFactory
     }
   ]
 })
@@ -137,8 +133,9 @@ export class AppModule {}
     NzConfigService,
     {
       provide: NZ_CONFIG,
-      useFactory: (nzConfigService: NzConfigService) => {
-        const globalConfig = nzConfigService.getConfig();
+      useFactory: () => {
+        // 获取全局 NzConfigService
+        const globalConfig = inject(NzConfigService, { skipSelf: true }).getConfig();
         const localConfig = {
           select: {
             nzBorderless: true
@@ -151,8 +148,6 @@ export class AppModule {}
         };
         return mergedConfig;
       },
-      // 获取全局 NzConfigService
-      deps: [[new SkipSelf(), NzConfigService]]
     }
   ]
 })

docs/i18n.en-US.md

@@ -57,7 +57,8 @@ import { en_US, NZ_I18N, fr_FR } from 'ng-zorro-antd/i18n';
 @NgModule({
   providers   : [{
     provide: NZ_I18N,
-    useFactory: (localId: string) => {
+    useFactory: () => {
+      const localId = inject(LOCALE_ID);
       switch (localId) {
         case 'en':
           return en_US;
@@ -67,8 +68,7 @@ import { en_US, NZ_I18N, fr_FR } from 'ng-zorro-antd/i18n';
         default:
           return en_US;
       }
-    },
-    deps: [LOCALE_ID]
+    }
   }]
 })
 export class AppModule { }
@@ -229,4 +229,4 @@ const customLanguagePack = {
 })
 export class AppModule { }
 
-```
+```

docs/i18n.zh-CN.md

@@ -53,7 +53,8 @@ import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';
 @NgModule({
   providers   : [{
     provide: NZ_I18N,
-    useFactory: (localId: string) => {
+    useFactory: () => {
+      const localId = inject(LOCALE_ID);
       switch (localId) {
         case 'en':
           return en_US;
@@ -63,8 +64,7 @@ import { en_US, NZ_I18N, zh_CN } from 'ng-zorro-antd/i18n';
         default:
           return en_US;
       }
-    },
-    deps: [LOCALE_ID]
+    }
   }]
 })
 export class AppModule { }
@@ -223,4 +223,4 @@ const customLanguagePack = {
 })
 export class AppModule { }
 
-```
+```