fix(module:timeline): fix timeline check error (#5245)

close #5230
NG-ZORRO · May 10, 2020 · ee2859f · ee2859f
1 parent 1b0c3ef
commit ee2859f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/components/timeline/public-api.ts b/components/timeline/public-api.ts
@@ -9,3 +9,4 @@
 export * from './timeline-item.component';
 export * from './timeline.component';
 export * from './timeline.module';
+export * from './timeline.service';
diff --git a/components/timeline/timeline-item.component.ts b/components/timeline/timeline-item.component.ts
@@ -19,6 +19,7 @@ import {
 } from '@angular/core';
 
 import { NzTimelineMode } from './timeline.component';
+import { TimelineService } from './timeline.service';
 
 const TimelineTimeDefaultColors = ['red', 'blue', 'green', 'grey', 'gray'] as const;
 export type NzTimelineItemColor = typeof TimelineTimeDefaultColors[number];
@@ -70,9 +71,10 @@ export class NzTimelineItemComponent implements OnChanges {
   borderColor: string | null = null;
   position: NzTimelineMode | undefined;
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(private cdr: ChangeDetectorRef, private timelineService: TimelineService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
+    this.timelineService.markForCheck();
     if (changes.nzColor) {
       this.updateCustomColor();
     }

diff --git a/components/timeline/timeline.component.ts b/components/timeline/timeline.component.ts
@@ -15,6 +15,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  OnInit,
   QueryList,
   SimpleChange,
   SimpleChanges,
@@ -25,6 +26,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzTimelineItemComponent } from './timeline-item.component';
+import { TimelineService } from './timeline.service';
 
 const TimelineModes = ['left', 'alternate', 'right'] as const;
 export type NzTimelineMode = typeof TimelineModes[number];
@@ -34,6 +36,7 @@ export type NzTimelineMode = typeof TimelineModes[number];
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   selector: 'nz-timeline',
+  providers: [TimelineService],
   exportAs: 'nzTimeline',
   template: `
     <ul
@@ -70,7 +73,7 @@ export type NzTimelineMode = typeof TimelineModes[number];
     <ng-content></ng-content>
   `
 })
-export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestroy {
+export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
   @ContentChildren(NzTimelineItemComponent) listOfItems!: QueryList<NzTimelineItemComponent>;
 
   @Input() nzMode?: NzTimelineMode;
@@ -83,7 +86,7 @@ export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestr
 
   private destroy$ = new Subject<void>();
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  constructor(private cdr: ChangeDetectorRef, private timelineService: TimelineService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const { nzMode, nzReverse, nzPending } = changes;
@@ -96,6 +99,11 @@ export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestr
       this.isPendingBoolean = nzPending.currentValue === true;
     }
   }
+  ngOnInit(): void {
+    this.timelineService.check$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.cdr.markForCheck();
+    });
+  }
 
   ngAfterContentInit(): void {
     this.updateChildren();

diff --git a/components/timeline/timeline.service.ts b/components/timeline/timeline.service.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+import { ReplaySubject } from 'rxjs';
+
+export class TimelineService {
+  check$ = new ReplaySubject(1);
+  markForCheck(): void {
+    this.check$.next();
+  }
+}