mirror of https://github.com/abpframework/abp
Merge pull request #4849 from abpframework/fix/4818
Implemented the SubscriptionServicepull/4857/head
Erol Arkat
5 years ago
committed by
GitHub
commit
57fb35247c
@ -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