feat(abc:st): add provideSTWidgets

packages/abc/cell/provide.ts

@@ -4,6 +4,9 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { CellService } from './cell.service';
 
+/**
+ * Just only using Standalone widgets
+ */
 export function provideCellWidgets(...widgets: Array<{ KEY: string; type: NzSafeAny }>): EnvironmentProviders {
   return makeEnvironmentProviders([
     {

packages/abc/st/demo/widget.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-类型为 `widget` 自定义小部件，例如点击头像处理，查看[源代码](https://github.com/ng-alain/delon/blob/master/src/app/shared/st-widget/img.widget.ts)。
+类型为 `widget` 自定义小部件，例如点击头像处理，查看[源代码](https://github.com/ng-alain/delon/blob/master/src/app/shared/st-widget/img.ts)。
 
 ## en-US
 
-The type is `widget` custom widget, eg: Click on Avatar effect, View [source code](https://github.com/ng-alain/delon/blob/master/src/app/shared/st-widget/img.widget.ts).
+The type is `widget` custom widget, eg: Click on Avatar effect, View [source code](https://github.com/ng-alain/delon/blob/master/src/app/shared/st-widget/img.ts).
 
 ```ts
 import { Component, ViewChild } from '@angular/core';

packages/abc/st/provide.ts

@@ -0,0 +1,21 @@
+import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';
+
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import { STWidgetRegistry } from './st-widget';
+
+/**
+ * Just only using Standalone widgets
+ */
+export function provideSTWidgets(...widgets: Array<{ KEY: string; type: NzSafeAny }>): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        const srv = inject(STWidgetRegistry);
+        widgets.forEach(widget => srv.register(widget.KEY, widget.type));
+      }
+    }
+  ]);
+}

packages/abc/st/public_api.ts

@@ -9,3 +9,4 @@ export { STComponent } from './st.component';
 export { STRowDirective } from './st-row.directive';
 export * from './st.config';
 export { STModule } from './st.module';
+export * from './provide';

src/app/app.config.ts

@@ -22,6 +22,7 @@ import { zhCN as dateLang } from 'date-fns/locale';
 import { provideTinymce } from 'ngx-tinymce';
 
 import { provideCellWidgets } from '@delon/abc/cell';
+import { provideSTWidgets } from '@delon/abc/st';
 import { mockInterceptor, provideDelonMockConfig } from '@delon/mock';
 import { ALAIN_I18N_TOKEN, provideAlain } from '@delon/theme';
 import { AlainConfig } from '@delon/util/config';
@@ -36,7 +37,7 @@ import { routes } from './routes/routes';
 import { CELL_WIDGETS } from './shared/cell-widget';
 import { IconComponent } from './shared/components/icon/icon.component';
 import { JsonSchemaModule } from './shared/json-schema/json-schema.module';
-import { STWidgetModule } from './shared/st-widget/st-widget.module';
+import { ST_WIDGETS } from './shared/st-widget';
 import * as MOCKDATA from '../../_mock';
 import { environment } from '../environments/environment';
 
@@ -110,9 +111,9 @@ export const appConfig: ApplicationConfig = {
       baseURL: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.2/'
     }),
     provideCellWidgets(...CELL_WIDGETS),
+    provideSTWidgets(...ST_WIDGETS),
     importProvidersFrom(
       JsonSchemaModule,
-      STWidgetModule,
       ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
     ),
     StartupService,

src/app/shared/st-widget/img.widget.ts → src/app/shared/st-widget/img.ts

@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnChanges, SimpleChanges } from '@angular/core';
 
+import { NzImageModule } from 'ng-zorro-antd/image';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'st-widget-img',
@@ -18,15 +20,21 @@ import { NzMessageService } from 'ng-zorro-antd/message';
   host: {
     '(click)': 'show()'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NzToolTipModule, NzImageModule]
 })
-export class STImgWidget {
+export class STImgWidget implements OnChanges {
   static readonly KEY = 'img';
 
   img!: string;
 
   constructor(private msg: NzMessageService) {}
 
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes);
+  }
+
   show(): void {
     this.msg.info(`正在打开大图${this.img}……`);
   }

src/app/shared/st-widget/index.ts

@@ -0,0 +1,3 @@
+import { STImgWidget } from './img';
+
+export const ST_WIDGETS = [{ KEY: STImgWidget.KEY, type: STImgWidget }];