refactor(module:anchor): refactor anchor (#2546)

* refactor(module:anchor): refactor anchor - feat: the nzTarget support string value - fix: invalid id in demo * chore: add encapsulation:ViewEncapsulation.None * chore: add encapsulation:ViewEncapsulation.None * chore: fix display style in host * chore: remove :host ref #2381
NG-ZORRO · Nov 30, 2018 · 484a793 · 484a793
1 parent 06c470a
commit 484a793
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 24 deletions.
diff --git a/components/anchor/anchor.spec.ts b/components/anchor/anchor.spec.ts
@@ -45,10 +45,10 @@ describe('anchor', () => {
     });
 
     it('should hava remove listen when the component is destroyed', () => {
-      expect(context.comp.scroll$.closed).toBeFalsy();
+      expect(context.comp['scroll$'].closed).toBeFalsy();
       context.comp.ngOnDestroy();
       fixture.detectChanges();
-      expect(context.comp.scroll$.closed).toBeTruthy();
+      expect(context.comp['scroll$'].closed).toBeTruthy();
     });
 
     it('should actived when scrolling to the anchor', (done: () => void) => {
@@ -139,6 +139,22 @@ describe('anchor', () => {
       });
     });
 
+    describe('[nzTarget]', () => {
+      it('with window', () => {
+        spyOn(window, 'addEventListener');
+        context.nzTarget = window;
+        fixture.detectChanges();
+        expect(window.addEventListener).toHaveBeenCalled();
+      });
+      it('with string', () => {
+        const el = document.querySelector('#target');
+        spyOn(el, 'addEventListener');
+        context.nzTarget = '#target';
+        fixture.detectChanges();
+        expect(el.addEventListener).toHaveBeenCalled();
+      });
+    });
+
     it('(nzClick)', () => {
       spyOn(context, '_click');
       expect(context._click).not.toHaveBeenCalled();
@@ -243,6 +259,7 @@ describe('anchor', () => {
     </tr>
   </table>
   <div style="height: 1000px"></div>
+  <div id="target"></div>
   `
 })
 export class TestComponent {

diff --git a/components/anchor/demo/basic.ts b/components/anchor/demo/basic.ts
@@ -6,9 +6,9 @@ import { Component } from '@angular/core';
     <nz-anchor>
       <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
       <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
-      <nz-link nzHref="#API" nzTitle="API">
-        <nz-link nzHref="#anchor-props" nzTitle="nz-anchor"></nz-link>
-        <nz-link nzHref="#link-props" nzTitle="nz-link"></nz-link>
+      <nz-link nzHref="#api" nzTitle="API">
+        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
+        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
       </nz-link>
     </nz-anchor>
   `

diff --git a/components/anchor/demo/static.ts b/components/anchor/demo/static.ts
@@ -7,9 +7,9 @@ import { Component, ViewEncapsulation } from '@angular/core';
     <nz-anchor [nzAffix]="false">
       <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
       <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
-      <nz-link nzHref="#API" nzTitle="API">
-        <nz-link nzHref="#anchor-props" nzTitle="nz-anchor"></nz-link>
-        <nz-link nzHref="#link-props" nzTitle="nz-link"></nz-link>
+      <nz-link nzHref="#api" nzTitle="API">
+        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
+        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
       </nz-link>
     </nz-anchor>
   `

diff --git a/components/anchor/doc/index.en-US.md b/components/anchor/doc/index.en-US.md
@@ -21,6 +21,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 | `[nzOffsetBottom]` | Pixels to offset from bottom when calculating position of scroll | number | - |
 | `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | number | 0 |
 | `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode | boolean | false |
+| `[nzTarget]` | Scrolling container | `string, HTMLElement` | `window` |
 | `(nzClick)` | Click of Anchor item | `EventEmitter<string>` | - |
 | `(nzScroll)` | The scroll function that is triggered when scrolling to an anchor. | `EventEmitter<NzAnchorLinkComponent>` | - |
 

diff --git a/components/anchor/doc/index.zh-CN.md b/components/anchor/doc/index.zh-CN.md
@@ -22,6 +22,7 @@ title: Anchor
 | `[nzOffsetBottom]` | 距离窗口底部达到指定偏移量后触发 | number |  |
 | `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | number |  |
 | `[nzShowInkInFixed]` | 固定模式是否显示小圆点 | boolean | false |
+| `[nzTarget]` | 指定滚动的容器 | `string, HTMLElement` | `window` |
 | `(nzClick)` | 点击项触发 | `EventEmitter<string>` | - |
 | `(nzScroll)` | 滚动至某锚点时触发 | `EventEmitter<NzAnchorLinkComponent>` | - |
 

diff --git a/components/anchor/nz-anchor-link.component.ts b/components/anchor/nz-anchor-link.component.ts
@@ -1,12 +1,15 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   ElementRef,
   HostBinding,
   Input,
   OnDestroy,
   OnInit,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { NzAnchorComponent } from './nz-anchor.component';
@@ -16,9 +19,15 @@ import { NzAnchorComponent } from './nz-anchor.component';
   preserveWhitespaces: false,
   templateUrl        : './nz-anchor-link.component.html',
   host               : {
-    '[class.ant-anchor-link]': 'true',
-    'style'                  : 'display:block'
-  }
+    '[class.ant-anchor-link]': 'true'
+  },
+  styles             : [ `
+    nz-link {
+      display: block;
+    }
+  ` ],
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush
 })
 export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
@@ -30,6 +39,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
   @Input()
   set nzTitle(value: string | TemplateRef<void>) {
     if (value instanceof TemplateRef) {
+      this.titleStr = null;
       this.titleTpl = value;
     } else {
       this.titleStr = value;
@@ -40,7 +50,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
   @HostBinding('class.ant-anchor-link-active') active: boolean = false;
 
-  constructor(public el: ElementRef, private anchorComp: NzAnchorComponent) {
+  constructor(public el: ElementRef, private anchorComp: NzAnchorComponent, private cdr: ChangeDetectorRef) {
   }
 
   ngOnInit(): void {
@@ -53,6 +63,10 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
     this.anchorComp.handleScrollTo(this);
   }
 
+  markForCheck(): void {
+    this.cdr.markForCheck();
+  }
+
   ngOnDestroy(): void {
     this.anchorComp.unregisterLink(this);
   }

diff --git a/components/anchor/nz-anchor.component.html b/components/anchor/nz-anchor.component.html
@@ -2,7 +2,7 @@
   <ng-template [ngTemplateOutlet]="content"></ng-template>
 </nz-affix>
 <ng-template #content>
-  <div class="ant-anchor-wrapper" #wrap [ngStyle]="wrapperStyle">
+  <div class="ant-anchor-wrapper" [ngStyle]="wrapperStyle">
     <div class="ant-anchor" [ngClass]="{'fixed': !nzAffix && !nzShowInkInFixed}">
       <div class="ant-anchor-ink">
         <div class="ant-anchor-ink-ball" [class.visible]="visible" #ink></div>

diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
@@ -10,7 +10,8 @@ import {
   Input,
   OnDestroy,
   Output,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
@@ -30,18 +31,18 @@ const sharpMatcherRegx = /#([^#]+)$/;
   selector           : 'nz-anchor',
   preserveWhitespaces: false,
   templateUrl        : './nz-anchor.component.html',
+  encapsulation      : ViewEncapsulation.None,
   changeDetection    : ChangeDetectionStrategy.OnPush
 })
 export class NzAnchorComponent implements OnDestroy, AfterViewInit {
 
   private links: NzAnchorLinkComponent[] = [];
   private animating = false;
   private target: Element = null;
-  scroll$: Subscription = null;
+  private scroll$: Subscription = null;
+  @ViewChild('ink') private ink: ElementRef;
   visible = false;
   wrapperStyle: {} = { 'max-height': '100vh' };
-  @ViewChild('wrap') private wrap: ElementRef;
-  @ViewChild('ink') private ink: ElementRef;
 
   // region: fields
 
@@ -93,8 +94,8 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
   }
 
   @Input()
-  set nzTarget(el: Element) {
-    this.target = el;
+  set nzTarget(el: string | Element) {
+    this.target = typeof el === 'string' ? this.doc.querySelector(el) : el;
     this.registerScrollEvent();
   }
 
@@ -130,8 +131,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
 
   private registerScrollEvent(): void {
     this.removeListen();
-    this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged())
-    .subscribe(e => this.handleScroll());
+    this.scroll$ = fromEvent(this.getTarget(), 'scroll')
+      .pipe(throttleTime(50), distinctUntilChanged())
+      .subscribe(() => this.handleScroll());
     // 由于页面刷新时滚动条位置的记忆
     // 倒置在dom未渲染完成，导致计算不正确
     setTimeout(() => this.handleScroll());
@@ -187,17 +189,21 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
   }
 
   private clearActive(): void {
-    this.links.forEach(i => i.active = false);
+    this.links.forEach(i => {
+      i.active = false;
+      i.markForCheck();
+    });
   }
 
   private handleActive(comp: NzAnchorLinkComponent): void {
     this.clearActive();
 
     comp.active = true;
-    this.cd.detectChanges();
+    comp.markForCheck();
 
     const linkNode = (comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
     this.ink.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+    this.cd.detectChanges();
 
     this.nzScroll.emit(comp);
   }