diff --git a/components/back-top/back-top.spec.ts b/components/back-top/back-top.spec.ts index 1d60a5407b7..cb7ceeab521 100644 --- 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 index c5385c785f5..da6d4f797f2 100644 --- 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` | - | -| `[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` | - | diff --git a/components/back-top/doc/index.zh-CN.md b/components/back-top/doc/index.zh-CN.md index 3158b9a02e9..954d8aee0ee 100644 --- 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` | - | -| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | number | `400` | -| `[nzTarget]` | 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | Element | `window` | +| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | `number` | `400` | +| `[nzTarget]` | 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | `string, Element` | `window` | | `(nzClick)` | 点击按钮的回调函数 | `EventEmitter` | - | diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index fbe56a269a8..53f34c7d747 100644 --- 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 = 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 {