refactor(module:back-top): refactor back-top (NG-ZORRO#2547)

refactor(module:back-top): refactor back-top
hsuanxyz · Nov 30, 2018 · 0f5b086 · 0f5b086
1 parent 0adc83b
commit 0f5b086
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/components/back-top/back-top.spec.ts b/components/back-top/back-top.spec.ts
@@ -182,6 +182,18 @@ describe('Component:nz-back-top', () => {
 
       expect(componentObject.backTopButton() === null).toBe(false);
     }));
+
+    it('element (use string id) scroll shows the button', fakeAsync(() => {
+      component.nzTarget = '#fakeTarget';
+
+      const throttleTime = 50;
+
+      componentObject.scrollTo(fakeTarget, defaultVisibilityHeight + 1);
+      tick(throttleTime + 1);
+      fixture.detectChanges();
+
+      expect(componentObject.backTopButton() === null).toBe(false);
+    }));
   });
 
   describe('#nzTemplate', () => {

diff --git a/components/back-top/doc/index.en-US.md b/components/back-top/doc/index.en-US.md
@@ -21,7 +21,7 @@ title: BackTop
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | `[nzTemplate]` | custom content | `TemplateRef<void>` | - |
-| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | number | `400` |
-| `[nzTarget]` | specifies the scrollable area dom node | Element | `window` |
+| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | `number` | `400` |
+| `[nzTarget]` | specifies the scrollable area dom node | `string, Element` | `window` |
 | `(nzClick)` | a callback function, which can be executed when you click the button | `EventEmitter<boolean>` | - |
 
diff --git a/components/back-top/doc/index.zh-CN.md b/components/back-top/doc/index.zh-CN.md
@@ -22,6 +22,6 @@ title: BackTop
 | 成员 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzTemplate]` | 自定义内容，见示例 | `TemplateRef<void>` | - |
-| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | number | `400` |
-| `[nzTarget]` | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Element | `window` |
+| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | `number` | `400` |
+| `[nzTarget]` | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `string, Element` | `window` |
 | `(nzClick)` | 点击按钮的回调函数 | `EventEmitter<boolean>` | - |
diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts
@@ -1,22 +1,24 @@
+import {
+  animate,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
   Output,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 
-import {
-  animate,
-  style,
-  transition,
-  trigger
-} from '@angular/animations';
-
 import { fromEvent, Subscription } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
 
@@ -39,6 +41,7 @@ import { toNumber } from '../core/util/convert';
   ],
   templateUrl        : './nz-back-top.component.html',
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   preserveWhitespaces: false
 })
 export class NzBackTopComponent implements OnInit, OnDestroy {
@@ -62,14 +65,15 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
   }
 
   @Input()
-  set nzTarget(el: HTMLElement) {
-    this.target = el;
+  set nzTarget(el: string | HTMLElement) {
+    this.target = typeof el === 'string' ? this.doc.querySelector(el) : el;
     this.registerScrollEvent();
   }
 
   @Output() readonly nzClick: EventEmitter<boolean> = new EventEmitter();
 
-  constructor(private scrollSrv: NzScrollService, private cd: ChangeDetectorRef) {
+  // tslint:disable-next-line:no-any
+  constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) {
   }
 
   ngOnInit(): void {
@@ -105,7 +109,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
     this.removeListen();
     this.handleScroll();
     this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged())
-    .subscribe(e => this.handleScroll());
+    .subscribe(() => this.handleScroll());
   }
 
   ngOnDestroy(): void {