chore: optimize drawer

alauda · Dec 6, 2023 · 61fa61e · 61fa61e
1 parent f6c143c
commit 61fa61e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 26 deletions.
diff --git a/src/drawer/component/drawer.component.ts b/src/drawer/component/drawer.component.ts
@@ -30,8 +30,7 @@ import { DrawerOptions, DrawerSize } from '../types';
   providers: [DrawerService],
 })
 export class DrawerComponent<T = unknown, C = unknown, R = any>
-  extends DrawerOptions<T, C>
-  implements AfterViewInit, OnChanges
+  implements AfterViewInit, OnChanges, Required<DrawerOptions<T, C>>
 {
   @Input()
   title: string | TemplateRef<C>;
@@ -91,9 +90,7 @@ export class DrawerComponent<T = unknown, C = unknown, R = any>
 
   private drawerRef: DrawerRef;
 
-  constructor(private readonly drawerService: DrawerService) {
-    super();
-  }
+  constructor(private readonly drawerService: DrawerService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const { visible } = changes;

diff --git a/src/drawer/component/internal/internal.component.html b/src/drawer/component/internal/internal.component.html
@@ -20,7 +20,7 @@
           <ng-container *ngIf="isTemplateRef(options.title); else normal">
             <ng-container
               [ngTemplateOutlet]="options.title"
-              [ngTemplateOutletContext]="{ $implicit: options.contentParams }"
+              [ngTemplateOutletContext]="options.contentParams"
             ></ng-container>
           </ng-container>
           <ng-template #normal>
@@ -42,10 +42,7 @@
         <ng-template cdkPortalOutlet></ng-template>
         <ng-container *ngIf="isTemplateRef(options.content)">
           <ng-container
-            *ngTemplateOutlet="
-              options.content;
-              context: { $implicit: options.contentParams }
-            "
+            *ngTemplateOutlet="options.content; context: options.contentParams"
           >
           </ng-container>
         </ng-container>
@@ -58,7 +55,7 @@
         <ng-container *ngIf="isTemplateRef(options.footer); else normal">
           <ng-container
             [ngTemplateOutlet]="options.footer"
-            [ngTemplateOutletContext]="{ $implicit: options.contentParams }"
+            [ngTemplateOutletContext]="options.contentParams"
           ></ng-container>
         </ng-container>
         <ng-template #normal>

diff --git a/src/drawer/types.ts b/src/drawer/types.ts
@@ -7,19 +7,19 @@ export enum DrawerSize {
   Big = 'big',
 }
 
-export abstract class DrawerOptions<T = unknown, C = unknown> {
-  abstract title?: string | TemplateRef<C>;
-  abstract content?: ComponentType<T> | TemplateRef<C>;
-  abstract footer?: string | TemplateRef<C>;
-  abstract contentParams?: C; // 不仅作为content的参数，同时是title和footer的上下文
-  abstract width?: number;
-  abstract size?: DrawerSize; // 内置的宽度尺寸，也可以使用 width 自定义
-  abstract offsetY?: string;
-  abstract divider?: boolean;
-  abstract drawerClass?: string;
-  abstract visible?: boolean;
-  abstract showClose?: boolean;
-  abstract mask?: boolean;
-  abstract maskClosable?: boolean; // 点击背景是否关闭抽屉
-  abstract hideOnClickOutside?: boolean; // 在抽屉外点击是否关闭抽屉，与 maskClosable 的区别是是否有 mask
+export interface DrawerOptions<T = unknown, C = unknown> {
+  title?: string | TemplateRef<C>;
+  content?: ComponentType<T> | TemplateRef<C>;
+  footer?: string | TemplateRef<C>;
+  contentParams?: C; // 不仅作为content的参数，同时是title和footer的上下文
+  width?: number;
+  size?: DrawerSize; // 内置的宽度尺寸，也可以使用 width 自定义
+  offsetY?: string;
+  divider?: boolean;
+  drawerClass?: string;
+  visible?: boolean;
+  showClose?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean; // 点击背景是否关闭抽屉
+  hideOnClickOutside?: boolean; // 在抽屉外点击是否关闭抽屉，与 maskClosable 的区别是是否有 mask
 }