fix: drawer option update sync

alauda · Apr 25, 2024 · 11caa9d · 11caa9d
1 parent fbc5cc0
commit 11caa9d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/src/drawer/component/drawer.component.ts b/src/drawer/component/drawer.component.ts
@@ -112,6 +112,7 @@ export class DrawerComponent<
         this.drawerRef.close();
       }
     }
+    this.drawerService.updateOptions(this);
   }
 
   ngAfterViewInit() {

diff --git a/src/drawer/component/internal/internal.component.ts b/src/drawer/component/internal/internal.component.ts
@@ -21,6 +21,7 @@ import {
 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   InjectionToken,
@@ -128,7 +129,10 @@ export class DrawerInternalComponent<T = unknown, C extends object = object> {
 
   isTemplateRef = isTemplateRef;
 
-  constructor(private readonly injector: Injector) {}
+  constructor(
+    private readonly injector: Injector,
+    private readonly cdr: ChangeDetectorRef,
+  ) {}
 
   ngAfterViewInit() {
     this.attachBodyContent();
@@ -206,6 +210,11 @@ export class DrawerInternalComponent<T = unknown, C extends object = object> {
     }
   }
 
+  updateOptions(options: DrawerOptions<T, C>) {
+    this.options = options;
+    this.cdr.markForCheck();
+  }
+
   show() {
     this.showHide$$.next('show');
   }

diff --git a/src/drawer/drawer.service.ts b/src/drawer/drawer.service.ts
@@ -47,6 +47,7 @@ export class DrawerService<
 
   updateOptions(options: DrawerOptions<T, C>): void {
     this.options = merge<DrawerOptions<T, C>>(DEFAULT_OPTIONS, options);
+    this.drawerInternalComponentRef?.instance.updateOptions(this.options);
   }
 
   private createOverlay() {
@@ -97,7 +98,7 @@ export class DrawerService<
     const drawerInternalComponentRef = this.overlayRef.attach(
       new ComponentPortal(DrawerInternalComponent<T, C>),
     );
-    drawerInternalComponentRef.instance.options = this.options;
+    drawerInternalComponentRef.instance.updateOptions(this.options);
     drawerInternalComponentRef.instance.animationStep$.subscribe(step => {
       if (step === 'hideDone') {
         this.invisible$.next();

diff --git a/stories/drawer/basic-drawer.component.ts b/stories/drawer/basic-drawer.component.ts
@@ -29,7 +29,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       [divider]="divider"
       [offsetY]="offsetY + 'px'"
       [visible]="visible"
-      [hideOnClickOutside]="true"
       (close)="closeHandle()"
     >
       <div *auiDrawerHeader>header</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,6 +112,7 @@ export class DrawerComponent< @@
             this.drawerRef.close();
           }
         }
+        this.drawerService.updateOptions(this);
       }
       ngAfterViewInit() {
@@ Expand Down @@