docs: upgrade signal

ng-alain · Feb 11, 2025 · f53a04e · f53a04e
1 parent f359731
commit f53a04e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/packages/abc/notice-icon/demo/basic.md b/packages/abc/notice-icon/demo/basic.md
@@ -12,7 +12,7 @@ import { NoticeIconComponent } from '@delon/abc/notice-icon';
 
 @Component({
   selector: 'app-demo',
-  template: ` <notice-icon count="5" /> `,
+  template: `<notice-icon count="5" />`,
   imports: [NoticeIconComponent]
 })
 export class DemoComponent {}

diff --git a/packages/abc/notice-icon/demo/popover.md b/packages/abc/notice-icon/demo/popover.md
@@ -6,7 +6,7 @@ title: 带浮层卡片
 点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。
 
 ```ts
-import { Component, TemplateRef, ViewChild, inject } from '@angular/core';
+import { Component, TemplateRef, computed, inject, signal, viewChild } from '@angular/core';
 
 import { add, formatDistanceToNow, parse } from 'date-fns';
 
@@ -21,9 +21,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
       style="text-align: right; height: 64px; line-height: 64px; box-shadow: rgba(0, 21, 41, 0.12) 0 1px 4px; padding: 0 32px; width: 400px;"
     >
       <notice-icon
-        [data]="data"
-        [count]="count"
-        [loading]="loading"
+        [data]="data()"
+        [count]="count()"
+        [loading]="loading()"
         (select)="select($event)"
         (clear)="clear($event)"
         (popoverVisibleChange)="loadData()"
@@ -41,9 +41,11 @@ export class DemoComponent {
   private readonly msg = inject(NzMessageService);
   private readonly nzI18n = inject(NzI18nService);
 
-  @ViewChild('titleTpl') private titleTpl!: TemplateRef<{ $implicit: NoticeIconList }>;
-  @ViewChild('descTpl') private descTpl!: TemplateRef<{ $implicit: NoticeIconList }>;
-  data: NoticeItem[] = [
+  titleTpl = viewChild<TemplateRef<{ $implicit: NoticeIconList }>>('descTpl');
+  descTpl = viewChild<TemplateRef<{ $implicit: NoticeIconList }>>('descTpl');
+  count = signal(5);
+  loading = signal(false);
+  types: NoticeItem[] = [
     {
       title: '通知',
       list: [],
@@ -66,14 +68,11 @@ export class DemoComponent {
       clearText: '清空待办'
     }
   ];
-  count = 5;
-  loading = false;
-
-  updateNoticeData(notices: NoticeIconList[]): NoticeItem[] {
-    const data = this.data.slice();
+  list = signal<NoticeIconList[]>([]);
+  data = computed(() => {
+    const data = this.types.slice();
     data.forEach(i => (i.list = []));
-
-    notices.forEach(item => {
+    this.list().forEach(item => {
       const newItem = { ...item };
       if (typeof newItem.datetime === 'string') {
         newItem.datetime = parse(newItem.datetime, 'yyyy-MM-dd', new Date());
@@ -88,27 +87,28 @@ export class DemoComponent {
             processing: 'blue',
             urgent: 'red',
             doing: 'gold'
-          } as { [key: string]: string | undefined }
+          } as Record<string, string | undefined>
         )[newItem.status];
       }
       data.find(w => w.title === newItem.type)!.list.push(newItem);
     });
     return data;
-  }
+  });
 
   loadData(): void {
-    if (this.loading) return;
-    this.loading = true;
+    console.log('loaddata');
+    if (this.loading()) return;
+    this.loading.set(true);
     setTimeout(() => {
       const now = new Date();
-      console.log(this.descTpl);
-      this.data = this.updateNoticeData([
+      this.list.set([
         {
           id: '000000001',
           avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
           title: '你收到了 14 份新周报',
           datetime: add(now, { days: 10 }),
-          type: '通知'
+          type: '通知',
+          extra: '点击移除'
         },
         {
           id: '000000002',
@@ -158,8 +158,8 @@ export class DemoComponent {
         {
           id: '000000008',
           avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-          title: this.titleTpl,
-          description: this.descTpl,
+          title: this.titleTpl(),
+          description: this.descTpl(),
           datetime: '2017-08-07',
           type: '消息'
         },
@@ -196,17 +196,21 @@ export class DemoComponent {
           type: '待办'
         }
       ]);
-
-      this.loading = false;
+      this.loading.set(false);
     }, 500);
   }
 
   clear(type: string): void {
     this.msg.success(`清空了 ${type}`);
+    this.list.set([]);
   }
 
   select(res: NoticeIconSelect): void {
     this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
+    if (res.item.extra === '点击移除') {
+      this.msg.info(`执行了移除操作`);
+      this.list.set([...this.list().filter(w => w.id !== res.item.id)]);
+    }
   }
 
   showOK(): void {