Last active
July 29, 2021 07:48
-
-
Save SnisarOnline/5345693ee84ace023ed655e0f38dcfd3 to your computer and use it in GitHub Desktop.
Класс-Mixin для расширения ангуляр компонента и стандартизации отписок от потока
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export type Constructor<T> = new (...args: any[]) => T; | |
/** | |
* Расширение компонентов для стадартизации/централизации отпуска от потока. | |
* Expansion of the components to centralize the dispensing from the flow. | |
* @see [unsubscribe in Angular components](https://medium.com/@gesteira2046/goodbye-to-unsubscribe-in-angular-components-8817e1b21db2) | |
* | |
* @Example | |
* ```ts | |
* export class AppComponent extends ComponentDestroyedMixin() { | |
* constructor() { | |
* super(); | |
* } | |
* } | |
* ``` | |
*/ | |
// tslint:disable-next-line:typedef | |
export function ComponentDestroyedMixin<Type extends Constructor<{}>>(Base = class { | |
} as Type) { | |
return class Mixin extends Base implements OnDestroy { | |
protected componentDestroyed: Subject<void> = new Subject<void>(); | |
ngOnDestroy(): void { | |
// this.componentDestroyed ; | |
this.componentDestroyed.next(); | |
this.componentDestroyed.complete(); | |
} | |
}; | |
} | |
/** | |
* Расширение модальных-материал-компонентов для стадартизации отпуска от потока. | |
* | |
* @Example | |
* ```ts | |
* export class AppModalComponent extends ComponentDestroyedMixin() { | |
* constructor( | |
* @Inject(MAT_DIALOG_DATA), | |
* private dialogRef: MatDialogRef<MappingNodeDesignerComponent>, | |
* ) { | |
* super(router, dialogRef); | |
* } | |
* } | |
* ``` | |
*/ | |
export function DialogDestroyedMixin<T extends Constructor<{}>>(Base = class { | |
} as T): Constructor<{}> { | |
return class Mixin extends ComponentDestroyedMixin(Base) { | |
public dialogDestroyedMixinURLWithParams = true; | |
constructor(router: Router, dialogRef: MatDialogRef<any>) { | |
super(); | |
let startUrl = ''; | |
router.events | |
.pipe(takeUntil(this.componentDestroyed)) | |
.pipe( | |
filter(event => event instanceof NavigationEnd || event instanceof NavigationStart || event instanceof RouterEvent) | |
) | |
.subscribe((event) => { | |
if (event instanceof NavigationStart) { | |
startUrl = this.getUrl(router, router.url); | |
} | |
if (event instanceof NavigationEnd || event instanceof NavigationStart || event instanceof RouterEvent && event.url.includes('/login')) { | |
dialogRef.close(); | |
} | |
if (event instanceof NavigationEnd) { | |
const endURL = this.getUrl(router, event.url); | |
if (startUrl !== endURL) { | |
dialogRef.close(); | |
} | |
} | |
}); | |
} | |
private getUrl(router: Router, url: string): string { | |
if (this.dialogDestroyedMixinURLWithParams) { | |
return url; | |
} else { | |
const urlTree = router.parseUrl(url); | |
urlTree.queryParams = {}; | |
return urlTree.toString(); | |
} | |
} | |
}; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment