mirror of https://github.com/abpframework/abp.git
Erol Arkat
6 years ago
committed by
GitHub
GitHub
17 changed files with 190 additions and 177 deletions
@ -1,39 +1,45 @@ |
|||
import { Component, OnDestroy, OnInit, Type } from '@angular/core'; |
|||
import { Component, OnInit, Type } from '@angular/core'; |
|||
import { ActivatedRoute } from '@angular/router'; |
|||
import { Store } from '@ngxs/store'; |
|||
import { distinctUntilChanged } from 'rxjs/operators'; |
|||
import { ABP } from '../models/common'; |
|||
import { ReplaceableComponents } from '../models/replaceable-components'; |
|||
import { SubscriptionService } from '../services/subscription.service'; |
|||
import { ReplaceableComponentsState } from '../states/replaceable-components.state'; |
|||
import { takeUntilDestroy } from '../utils/rxjs-utils'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-replaceable-route-container', |
|||
template: ` |
|||
<ng-container *ngComponentOutlet="externalComponent || defaultComponent"></ng-container> |
|||
`,
|
|||
providers: [SubscriptionService], |
|||
}) |
|||
export class ReplaceableRouteContainerComponent implements OnInit, OnDestroy { |
|||
export class ReplaceableRouteContainerComponent implements OnInit { |
|||
defaultComponent: Type<any>; |
|||
|
|||
componentKey: string; |
|||
|
|||
externalComponent: Type<any>; |
|||
|
|||
constructor(private route: ActivatedRoute, private store: Store) {} |
|||
constructor( |
|||
private route: ActivatedRoute, |
|||
private store: Store, |
|||
private subscription: SubscriptionService, |
|||
) {} |
|||
|
|||
ngOnInit() { |
|||
this.defaultComponent = this.route.snapshot.data.replaceableComponent.defaultComponent; |
|||
this.componentKey = (this.route.snapshot.data |
|||
.replaceableComponent as ReplaceableComponents.RouteData).key; |
|||
|
|||
this.store |
|||
const component$ = this.store |
|||
.select(ReplaceableComponentsState.getComponent(this.componentKey)) |
|||
.pipe(takeUntilDestroy(this), distinctUntilChanged()) |
|||
.subscribe((res = {} as ReplaceableComponents.ReplaceableComponent) => { |
|||
.pipe(distinctUntilChanged()); |
|||
|
|||
this.subscription.addOne( |
|||
component$, |
|||
(res = {} as ReplaceableComponents.ReplaceableComponent) => { |
|||
this.externalComponent = res.component; |
|||
}); |
|||
}, |
|||
); |
|||
} |
|||
|
|||
ngOnDestroy() {} |
|||
} |
|||
|
|||
@ -1,34 +1,25 @@ |
|||
import { |
|||
Directive, |
|||
ElementRef, |
|||
EventEmitter, |
|||
Input, |
|||
OnDestroy, |
|||
OnInit, |
|||
Output, |
|||
} from '@angular/core'; |
|||
import { takeUntilDestroy } from '../utils/rxjs-utils'; |
|||
import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
import { fromEvent } from 'rxjs'; |
|||
import { debounceTime } from 'rxjs/operators'; |
|||
import { SubscriptionService } from '../services/subscription.service'; |
|||
|
|||
@Directive({ |
|||
// tslint:disable-next-line: directive-selector
|
|||
selector: '[input.debounce]', |
|||
providers: [SubscriptionService], |
|||
}) |
|||
export class InputEventDebounceDirective implements OnInit, OnDestroy { |
|||
export class InputEventDebounceDirective implements OnInit { |
|||
@Input() debounce = 300; |
|||
|
|||
@Output('input.debounce') readonly debounceEvent = new EventEmitter<Event>(); |
|||
|
|||
constructor(private el: ElementRef) {} |
|||
constructor(private el: ElementRef, private subscription: SubscriptionService) {} |
|||
|
|||
ngOnInit(): void { |
|||
fromEvent(this.el.nativeElement, 'input') |
|||
.pipe(debounceTime(this.debounce), takeUntilDestroy(this)) |
|||
.subscribe((event: Event) => { |
|||
this.debounceEvent.emit(event); |
|||
}); |
|||
} |
|||
const input$ = fromEvent(this.el.nativeElement, 'input').pipe(debounceTime(this.debounce)); |
|||
|
|||
ngOnDestroy(): void {} |
|||
this.subscription.addOne(input$, (event: Event) => { |
|||
this.debounceEvent.emit(event); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
@ -1,24 +1,21 @@ |
|||
import { Directive, ElementRef, EventEmitter, OnInit, Output, OnDestroy } from '@angular/core'; |
|||
import { Directive, ElementRef, EventEmitter, OnInit, Output } from '@angular/core'; |
|||
import { fromEvent } from 'rxjs'; |
|||
import { takeUntilDestroy } from '../utils/rxjs-utils'; |
|||
import { SubscriptionService } from '../services/subscription.service'; |
|||
|
|||
@Directive({ |
|||
// tslint:disable-next-line: directive-selector
|
|||
selector: '[click.stop]', |
|||
providers: [SubscriptionService], |
|||
}) |
|||
export class StopPropagationDirective implements OnInit, OnDestroy { |
|||
export class StopPropagationDirective implements OnInit { |
|||
@Output('click.stop') readonly stopPropEvent = new EventEmitter<MouseEvent>(); |
|||
|
|||
constructor(private el: ElementRef) {} |
|||
constructor(private el: ElementRef, private subscription: SubscriptionService) {} |
|||
|
|||
ngOnInit(): void { |
|||
fromEvent(this.el.nativeElement, 'click') |
|||
.pipe(takeUntilDestroy(this)) |
|||
.subscribe((event: MouseEvent) => { |
|||
event.stopPropagation(); |
|||
this.stopPropEvent.emit(event); |
|||
}); |
|||
this.subscription.addOne(fromEvent(this.el.nativeElement, 'click'), (event: MouseEvent) => { |
|||
event.stopPropagation(); |
|||
this.stopPropEvent.emit(event); |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy(): void {} |
|||
} |
|||
|
|||
Loading…
Reference in new issue