From b4a0ba7c445e033caa2b7585ce517afb5341d871 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=8C=E4=BA=A6?= <lingyi.zcs@alibaba-inc.com>
Date: Sat, 26 Aug 2017 18:59:56 +0800
Subject: [PATCH] fix(module:affix,anchor,back-top): fix and improve rxjs usage

---
 src/components/affix/nz-affix.component.ts     | 18 +++++++++++-------
 .../anchor/nz-anchor-link.component.ts         |  2 +-
 src/components/anchor/nz-anchor.component.ts   | 14 +++++++++-----
 .../back-top/nz-back-top.component.ts          | 12 ++++++++----
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/affix/nz-affix.component.ts b/src/components/affix/nz-affix.component.ts
index 14b9b780698..cc2b86b2b75 100644
--- 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
index aeb4f387a5d..b3cd45fe7f8 100644
--- 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
index 95036818ca2..0861509f2f1 100644
--- 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
index c1db4a98387..001c646e96a 100644
--- 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();
       });