-
`,
- styleUrls: [
+ styleUrls : [
'./style/index.less',
'./style/patch.less'
]
})
-export class NzAnchorComponent {
+export class NzAnchorComponent implements OnDestroy, OnInit {
private links: NzAnchorLinkComponent[] = [];
private scroll$: Subscription = null;
private target: Element = null;
- private animating: boolean = false;
+ private animating = false;
@ViewChild('container')
private container: ElementRef;
@@ -57,8 +55,8 @@ export class NzAnchorComponent {
@ViewChild('ball')
private ball: ElementRef;
- _top: number = 0;
- _visible: boolean = false;
+ _top = 0;
+ _visible = false;
@Input()
set nzTarget(el: Element) {
@@ -66,16 +64,19 @@ export class NzAnchorComponent {
this.registerScrollEvent();
}
- @Input() nzOffsetTop: number = 0;
+ @Input() nzOffsetTop = 0;
- @Input() nzBounds: number = 5;
+ @Input() nzBounds = 5;
@Output() nzScroll: EventEmitter
= new EventEmitter();
- constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2, @Inject(DOCUMENT) private doc: Document) { }
+ constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2, @Inject(DOCUMENT) private doc: any) {
+ }
ngOnInit(): void {
- if (!this.scroll$) this.registerScrollEvent();
+ if (!this.scroll$) {
+ this.registerScrollEvent();
+ }
}
private getTarget(): Element | Window {
@@ -83,9 +84,11 @@ export class NzAnchorComponent {
}
private handleScroll() {
- if (this.animating) return;
+ if (this.animating) {
+ return;
+ }
- let sections: Section[] = [];
+ const sections: Section[] = [];
this.links.forEach(comp => {
comp.active = false;
const target = this.doc.querySelector(comp.nzHref);
@@ -99,20 +102,23 @@ export class NzAnchorComponent {
});
this._visible = !!sections.length;
- if (!this._visible)
+ if (!this._visible) {
return;
+ }
const maxSection = sections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
maxSection.comp.active = true;
- let linkNode = (maxSection.comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
+ const linkNode = (maxSection.comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
this.ball.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
this.nzScroll.emit(maxSection.comp);
}
private removeListen() {
- if (this.scroll$) this.scroll$.unsubscribe();
+ if (this.scroll$) {
+ this.scroll$.unsubscribe();
+ }
}
private registerScrollEvent() {
@@ -122,9 +128,7 @@ export class NzAnchorComponent {
setTimeout(() => {
this.handleScroll();
}, 500);
- this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain)
- .call(throttleTime, 50)
- .call(distinctUntilChanged)
+ this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged())
.subscribe(e => {
this.handleScroll();
});
@@ -137,7 +141,9 @@ export class NzAnchorComponent {
/** 设置滚动条至 `linkComp` 所处位置 */
scrollTo(linkComp: NzAnchorLinkComponent) {
const el = this.doc.querySelector(linkComp.nzHref);
- if (!el) return;
+ if (!el) {
+ return;
+ }
this.animating = true;
const containerScrollTop = this.scrollSrv.getScroll(this.getTarget());
diff --git a/src/components/back-top/nz-back-top.component.ts b/src/components/back-top/nz-back-top.component.ts
index 7b008e72e7..eea0fb1f87 100644
--- a/src/components/back-top/nz-back-top.component.ts
+++ b/src/components/back-top/nz-back-top.component.ts
@@ -17,19 +17,17 @@ import {
transition,
animate
} from '@angular/animations';
-// import { Observable } from 'rxjs/Observable';
-import { RxChain } from '@angular/cdk/rxjs';
import { fromEvent } from 'rxjs/observable/fromEvent';
-import { throttleTime } from 'rxjs/operator/throttleTime';
-import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
+import { throttleTime } from 'rxjs/operators/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
import { Subscription } from 'rxjs/Subscription';
import { NzScrollService } from '../core/scroll/nz-scroll.service';
@Component({
- selector: 'nz-back-top',
+ selector : 'nz-back-top',
encapsulation: ViewEncapsulation.None,
- animations: [
+ animations : [
trigger('enterLeave', [
transition(':enter', [
style({ opacity: 0 }),
@@ -41,15 +39,15 @@ import { NzScrollService } from '../core/scroll/nz-scroll.service';
])
])
],
- template: `
-
+ template : `
+
`,
- styleUrls: [
+ styleUrls : [
'./style/index.less',
'./style/patch.less'
]
@@ -73,7 +71,8 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
@Output() nzClick: EventEmitter = new EventEmitter();
- constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2) { }
+ constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2) {
+ }
ngOnInit(): void {
if (!this.scroll$) this.registerScrollEvent();
@@ -99,9 +98,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
private registerScrollEvent() {
this.removeListen();
this.handleScroll();
- this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain)
- .call(throttleTime, 50)
- .call(distinctUntilChanged)
+ this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged())
.subscribe(e => {
this.handleScroll();
});
diff --git a/src/components/collapse/nz-collapseset.component.ts b/src/components/collapse/nz-collapseset.component.ts
index 3c89b3984c..5e0244b2e5 100644
--- a/src/components/collapse/nz-collapseset.component.ts
+++ b/src/components/collapse/nz-collapseset.component.ts
@@ -21,10 +21,7 @@ import { NzCollapseComponent } from './nz-collapse.component';
export class NzCollapsesetComponent {
- /**
- * all child collapse
- * @type {Array}
- */
+ // all child collapse
panels: Array = [];
@Input() nzAccordion = false;
diff --git a/src/components/core/scroll/nz-scroll.service.spec.ts b/src/components/core/scroll/nz-scroll.service.spec.ts
index e45809ca81..71ea95503f 100644
--- a/src/components/core/scroll/nz-scroll.service.spec.ts
+++ b/src/components/core/scroll/nz-scroll.service.spec.ts
@@ -1,6 +1,6 @@
import { ReflectiveInjector } from '@angular/core';
import { PlatformLocation } from '@angular/common';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
import { NzScrollService } from './nz-scroll.service';
diff --git a/src/components/core/scroll/nz-scroll.service.ts b/src/components/core/scroll/nz-scroll.service.ts
index b1f222d745..c9363b189d 100644
--- a/src/components/core/scroll/nz-scroll.service.ts
+++ b/src/components/core/scroll/nz-scroll.service.ts
@@ -15,7 +15,7 @@ function easeInOutCubic(t: number, b: number, c: number, d: number) {
@Injectable()
export class NzScrollService {
- constructor(@Inject(DOCUMENT) private doc: Document) {
+ constructor(@Inject(DOCUMENT) private doc: any) {
}
/** 设置 `el` 滚动条位置 */
@@ -65,10 +65,10 @@ export class NzScrollService {
/**
* 使用动画形式将 `el` 滚动至某位置
*
- * @param {(Element | Window)} containerEl 容器，默认 `window`
- * @param {number} [targetTopValue=0] 滚动至目标 `top` 值，默认：0，相当于顶部
- * @param {Function} [easing] 动作算法，默认：`easeInOutCubic`
- * @param {Function} [callback] 动画结束后回调
+ * @param containerEl 容器，默认 `window`
+ * @param targetTopValue 滚动至目标 `top` 值，默认：0，相当于顶部
+ * @param easing 动作算法，默认：`easeInOutCubic`
+ * @param callback 动画结束后回调
*/
scrollTo(containerEl: Element | Window, targetTopValue: number = 0, easing?: Function, callback?: Function) {
if (!containerEl) containerEl = window;
diff --git a/src/components/dropdown/nz-dropdown.component.ts b/src/components/dropdown/nz-dropdown.component.ts
index bc15b64711..e8f7cb775d 100644
--- a/src/components/dropdown/nz-dropdown.component.ts
+++ b/src/components/dropdown/nz-dropdown.component.ts
@@ -13,7 +13,7 @@ import {
ChangeDetectorRef
} from '@angular/core';
import { merge } from 'rxjs/observable/merge';
-import { debounceTime } from 'rxjs/operator/debounceTime';
+import { debounceTime } from 'rxjs/operators/debounceTime';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
@@ -79,7 +79,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() nzTrigger: 'click' | 'hover' = 'hover';
@Input() nzClickHide = true;
@Input() nzVisible = false;
- @Output() _visibleChange = new Subject();
+ @Output() _visibleChange = new Subject();
@Output() nzVisibleChange: EventEmitter = new EventEmitter();
@Input()
@@ -148,7 +148,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
}
_startSubscribe(observable$: Observable) {
- this._subscription = debounceTime.call(observable$, 300)
+ this._subscription = observable$.pipe(debounceTime(300))
.subscribe(this._onVisibleChange)
}
diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts
index 712efe6fe5..f37d9ff921 100644
--- a/src/components/menu/nz-submenu.component.ts
+++ b/src/components/menu/nz-submenu.component.ts
@@ -5,22 +5,13 @@ import {
import { style, animate, state, transition, trigger } from '@angular/animations';
import { NzMenuComponent } from './nz-menu.component';
import { Subject } from 'rxjs/Subject';
-import { debounceTime } from 'rxjs/operator/debounceTime';
+import { debounceTime } from 'rxjs/operators/debounceTime';
@Component({
selector : '[nz-submenu]',
animations: [
- trigger('fadeAnimation', [
- state('*', style({ opacity: 1 })),
- transition('* => void', [
- animate(150, style({ opacity: 0, display: 'none' }))
- ]),
- transition('void => *', [
- style({ opacity: '0' }),
- animate(150, style({ opacity: 1 }))
- ])
- ]),
trigger('expandAnimation', [
+ state('fade', style({ opacity: 1 })),
transition('expand => void', [
style({ height: '*', overflow: 'hidden' }),
animate(150, style({ height: 0 }))
@@ -28,6 +19,13 @@ import { debounceTime } from 'rxjs/operator/debounceTime';
transition('void => expand', [
style({ height: 0, overflow: 'hidden' }),
animate(150, style({ height: '*' }))
+ ]),
+ transition('fade => void', [
+ animate(150, style({ opacity: 0 }))
+ ]),
+ transition('void => fade', [
+ style({ opacity: '0' }),
+ animate(150, style({ opacity: 1 }))
])
])
],
@@ -43,7 +41,6 @@ import { debounceTime } from 'rxjs/operator/debounceTime';