fix(module:affix,anchor,back-top): fix and improve rxjs usage (#159)

NG-ZORRO · Aug 26, 2017 · 152b654 · 152b654
1 parent 468e80b
commit 152b654
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/src/components/affix/nz-affix.component.ts b/src/components/affix/nz-affix.component.ts
@@ -11,7 +11,11 @@ import {
   ElementRef,
   HostBinding
 } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+// import { Observable } from 'rxjs/Observable';
+import { RxChain } from '@angular/cdk';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { throttleTime } from 'rxjs/operator/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
 
 import { NzScrollService } from "../core/scroll/nz-scroll.service";
@@ -95,18 +99,18 @@ export class NzAffixComponent implements OnInit, OnDestroy {
   private registerScrollEvent() {
     this.removeListen();
     this.reCalculate().process();
-    this.scroll$ = Observable.fromEvent(this.getTarget(), 'scroll')
-      .throttleTime(50)
-      .distinctUntilChanged()
+    this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain<any>)
+      .call(throttleTime, 50)
+      .call(distinctUntilChanged)
       .subscribe(e => {
         this.process();
       });
 
     if (this.getTarget() !== window) {
       // 当 window 滚动位发生变动时，需要重新计算滚动容器
-      this.scrollWinInTarget$ = Observable.fromEvent(window, 'scroll')
-        .throttleTime(50)
-        .distinctUntilChanged()
+      this.scrollWinInTarget$ = (RxChain.from(fromEvent(window, 'scroll')) as RxChain<any>)
+        .call(throttleTime, 50)
+        .call(distinctUntilChanged)
         .subscribe(e => {
           this.orgOffset = null;
           this.fixed = false;

diff --git a/src/components/anchor/nz-anchor-link.component.ts b/src/components/anchor/nz-anchor-link.component.ts
@@ -47,6 +47,6 @@ export class NzAnchorLinkComponent {
     e.preventDefault();
     e.stopPropagation();
     this._anchorComp.scrollTo(this);
-    return false;
+    // return false;
   }
 }
diff --git a/src/components/anchor/nz-anchor.component.ts b/src/components/anchor/nz-anchor.component.ts
@@ -12,7 +12,11 @@ import {
   Inject
 } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Observable';
+// import { Observable } from 'rxjs/Observable';
+import { RxChain } from '@angular/cdk';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { throttleTime } from 'rxjs/operator/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
 
 import { NzScrollService } from "../core/scroll/nz-scroll.service";
@@ -104,7 +108,7 @@ export class NzAnchorComponent {
 
     let 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`;
-    console.log(linkNode, linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5);
+    // console.log(linkNode, linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5);
 
     this.nzScroll.emit(maxSection.comp);
   }
@@ -120,9 +124,9 @@ export class NzAnchorComponent {
     setTimeout(() => {
       this.handleScroll();
     }, 500);
-    this.scroll$ = Observable.fromEvent(this.getTarget(), 'scroll')
-      .throttleTime(50)
-      .distinctUntilChanged()
+    this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain<any>)
+      .call(throttleTime, 50)
+      .call(distinctUntilChanged)
       .subscribe(e => {
         this.handleScroll();
       });

diff --git a/src/components/back-top/nz-back-top.component.ts b/src/components/back-top/nz-back-top.component.ts
@@ -17,7 +17,11 @@ import {
   transition,
   animate
 } from '@angular/animations';
-import { Observable } from 'rxjs/Observable';
+// import { Observable } from 'rxjs/Observable';
+import { RxChain } from '@angular/cdk';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { throttleTime } from 'rxjs/operator/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
 
 import { NzScrollService } from "../core/scroll/nz-scroll.service";
@@ -95,9 +99,9 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
   private registerScrollEvent() {
     this.removeListen();
     this.handleScroll();
-    this.scroll$ = Observable.fromEvent(this.getTarget(), 'scroll')
-      .throttleTime(50)
-      .distinctUntilChanged()
+    this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain<any>)
+      .call(throttleTime, 50)
+      .call(distinctUntilChanged)
       .subscribe(e => {
         this.handleScroll();
       });