مدیریت تغییرات ذخیره نشده در انگولار — از صفر تا صد

1...
2<!-- CanLeave Popup Dialog (based on MatDialog) -->
3<wm-can-leave [dontLeave]="needSave" #canLeave>
4
5  <h2 mat-dialog-title><b>Unsaved changes</b></h2>
6
7  <mat-dialog-content>
8    You're about to leave the page without saving the latest changes.<br>Please confirm.
9  </mat-dialog-content>
10
11  <mat-dialog-actions align="end">
12    <button mat-button color="primary" (click)="canLeave.close(false)" cdkFocusInitial>Stay</button>
13    <button mat-button color="warn" (click)="canLeave.close(true)">Leave anyhow</button>
14  </mat-dialog-actions>
15
16</wm-can-leave>
17...

1/** Extends the DialogComponent to popup during CanDeactivate*/
2@Component({
3  selector: 'wm-can-leave',
4  template: '<ng-template><ng-content></ng-content></ng-template>'
5})
6export class CanLeaveComponent extends DialogComponent<boolean> {
7
8  constructor(private canLeave: CanLeaveService, dialog: MatDialog) { 
9    super(dialog);
10
11    // Hooks on the allowDeactivation observer
12    this.canLeave.allowDeactivation( this.canLeave$ );
13  }
14
15    /** When true, pops-up a dialog asking for user's consent to leave*/
16  @Input() dontLeave: boolean = false;
17
18  // CanLeave Observavble
19  private get canLeave$(): Observable<boolean> {
20    // Builds an observable to evaluate donLeave at subscription time
21    return defer( () => this.dontLeave ? this.open().afterClosed() : of(true) )
22      // Makes sure all the following requests will be true once the first has been granted
23      .pipe( tap( allow => this.dontLeave = !allow ) );
24  }
25}

1export type CanLeaveType = boolean|Promise<boolean>|Observable<boolean>;
2
3@Injectable()
4export class CanLeaveService implements CanDeactivate<any> {
5
6  private observer$ = new BehaviorSubject<CanLeaveType>(true);
7
8  /** Pushes a quanding value into the guard observer to resolve when leaving the page */
9  public allowDeactivation(guard: CanLeaveType) {
10    this.observer$.next(guard);
11  }
12
13  // Implements the CanDeactivate interface to conditionally prevent leaving the page
14  canDeactivate(): Observable<boolean> {
15    // Returns an observable resolving into a suitable guarding value
16    return this.observer$.pipe( 
17      // Flatten the observer to a lower order one
18      flatMap( canLeave => typeof(canLeave) === 'boolean' ? of(canLeave) : canLeave ),
19      // Makes sure the observable always resolves
20      first()
21    );
22  }
23}

1/** Dialog ref */
2export type DialogRef<R> = MatDialogRef<any, R>;
3
4/** 
5 * Component implementing a declarative version of the Angular Material Dialog 
6 */
7@Component({
8  selector: 'wm-dialog',
9  template: '<ng-template><ng-content></ng-content></ng-template>'
10})
11export class DialogComponent<R=any> implements MatDialogConfig<any> {
12
13  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
14
15  /** The dialog reference, when openend */
16  public ref: DialogRef<R>;
17
18  constructor(readonly dialog: MatDialog/*, readonly viewContainerRef: ViewContainerRef*/) {}
19
20  // -- Start of MatDialogConfig implementaiton -- 
21  
22  /** ID for the dialog. If omitted, a unique one will be generated. */
23  @Input() id: string;
24  /** The ARIA role of the dialog element. */
25  @Input() role: DialogRole = 'dialog';
26  /** Custom class for the overlay pane. */
27  @Input() panelClass: string | string[] = ''
28  /** Whether the dialog has a backdrop. */
29  @Input() hasBackdrop: boolean = true;
30  /** Custom class for the backdrop. */
31  @Input() backdropClass: string = '';
32  /** Whether the user can use escape or clicking on the backdrop to close the modal. */
33  @Input() disableClose: boolean = false;
34  /** Width of the dialog. */
35  @Input() width: string = '';
36  /** Height of the dialog. */
37  @Input() height: string = '';
38  /** Min-width of the dialog. If a number is provided, assumes pixel units. */
39  @Input() minWidth: number | string;
40  /** Min-height of the dialog. If a number is provided, assumes pixel units. */
41  @Input() minHeight?: number | string;
42  /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
43  @Input() maxWidt: number | string = '80vw';
44  /** Max-height of the dialog. If a number is provided, assumes pixel units. */
45  @Input() maxHeight: number | string;
46  /** Position overrides. */
47  @Input() position: DialogPosition;
48  /** Layout direction for the dialog's content. */
49  @Input() direction: Direction;
50  /** ID of the element that describes the dialog. */
51  @Input() ariaDescribedBy: string | null = null;
52  /** ID of the element that labels the dialog. */
53  @Input() ariaLabelledBy: string | null = null;
54  /** Aria label to assign to the dialog element. */
55  @Input() ariaLabel: string | null = null;
56  /** Whether the dialog should focus the first focusable element on open. */
57  @Input() autoFocus: boolean = true;
58  /** Whether the dialog should restore focus to the previously-focused element, after it's closed. */
59  @Input() restoreFocus: boolean = false;
60  /** Scroll strategy to be used for the dialog. */
61  @Input() scrollStrategy: ScrollStrategy;
62   /** Whether the dialog should close when the user goes backwards/forwards in history. */
63  @Input() closeOnNavigation: boolean = true;
64
65  //public data: any = this;
66
67  // -- End of MatDialogConfig implementaiton -- 
68
69  /** Opens the dialog when the passed condition is true */
70  @Input() set opened(open: boolean) { if(coerceBooleanProperty(open)) { this.open(); } }  
71  /** Reports the open status */
72  @Output() openedChange = new EventEmitter<boolean>();
73  /** Forces the dialog closing with the given value */
74  @Input() set closed(value: R) { this.close(value); }  
75  /** Reports the value the dialog as been closed with */
76  @Output() closedChange = new EventEmitter<R>(); 
77  
78  /** Opens the dialog returning the reference */
79  public open(): DialogRef<R> {
80     // Prevents multiple opening
81    if(!!this.ref) { return this.ref; }
82    // Opens the dialog with the given configuration
83    this.ref = this.dialog.open<any,any,R>(this.template, this);
84    // Emits the dialog has been opened
85    this.ref.afterOpened().subscribe( () => this.openedChange.emit(true) );
86    // Emist the dialog is closing
87    this.ref.beforeClosed().subscribe( () => this.openedChange.emit(false) );
88    
89    this.ref.afterClosed().subscribe( value => {
90      // Emits the dialog closed with value
91      this.closedChange.emit(value);
92      // Makes sure the reference goes backundefined when closed 
93      this.ref = undefined;
94    });
95    // Returns the reference for further use
96    return this.ref;
97  }
98
99  /** Closes the dialog passing along the output value */
100  public close(value: R): void {
101    !!this.ref && this.ref.close(value);
102  }
103}