fix(module: toast): fix toast component called in ngOnInit will repor…

…t an error (#795)
NG-ZORRO · Jun 15, 2021 · 77f36ab · 77f36ab
1 parent c10877a
commit 77f36ab
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 15 deletions.
diff --git a/components/toast/doc/index.en-US.md b/components/toast/doc/index.en-US.md
@@ -13,7 +13,7 @@ A lightweight feedback or tips, used to display content that does not interrupt
 - Toast with Icon, 4-6 words is recommended.; Toast without Icon, the number of words should not exceed 14.
 
 
-## API USE
+## API
 
 ```ts
 constructor(private _toast: ToastService) {}

diff --git a/components/toast/doc/index.zh-CN.md b/components/toast/doc/index.zh-CN.md
@@ -14,7 +14,7 @@ subtitle: 轻提示
 - 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。
 
 
-## API 调用
+## API
 ```ts
 constructor(private _toast: ToastService) {}
 ```

diff --git a/components/toast/toast.component.spec.ts b/components/toast/toast.component.spec.ts
@@ -1,8 +1,7 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ApplicationRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ToastService } from './toast.service';
-import { ToastComponent } from './toast.component';
 import { ToastModule } from './toast.module';
 import { IconModule, ButtonModule } from '../..';
 import { ButtonComponent } from '../button/button.component';
@@ -13,17 +12,20 @@ describe('ToastComponent', () => {
   let toastEle;
   let toastEle1;
   let buttons;
+  let appRef: ApplicationRef;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [TestToastComponent],
-      imports: [IconModule, ToastModule, ButtonModule]
+      imports: [IconModule, ToastModule, ButtonModule],
+      providers: [ApplicationRef]
     }).compileComponents();
     TestBed.overrideModule(ToastModule, {}).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestToastComponent);
+    appRef = TestBed.inject(ApplicationRef);
     component = fixture.componentInstance;
     toastEle = fixture.debugElement.query(By.css('toast'));
     buttons = fixture.debugElement.queryAll(By.directive(ButtonComponent));
@@ -82,67 +84,81 @@ describe('ToastComponent', () => {
     expect(toastEle.nativeElement.classList).toContain('am-toast-nomask-bottom');
   });
 
-  it('should showToast work', () => {
+  it('should showToast work', async () => {
     const button = buttons[0].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain(
       'This is a toast tips !!!',
       'showToast work'
     );
   });
 
-  it('should showToastNoMask work', () => {
+  it('should showToastNoMask work', async () => {
     const button = buttons[1].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain(
       'Toast without mask !!!',
       'showToastNoMask work'
     );
   });
 
-  it('should showCustomIcon work', () => {
+  it('should showCustomIcon work', async () => {
     const button = buttons[2].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.innerText).toContain('toast的内容', 'showCustomIcon work');
   });
 
-  it('should successToast work', () => {
+  it('should successToast work', async () => {
     const button = buttons[3].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain('Load success !!!', 'successToast work');
   });
 
-  it('should failToast work', () => {
+  it('should failToast work', async () => {
     const button = buttons[4].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain('Load failed !!!', 'failToast work');
   });
 
-  it('should offline work', () => {
+  it('should offline work', async () => {
     const button = buttons[5].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain(
       'Network connection failed !!!',
       'offline work'
     );
   });
 
-  it('should loadingToast work', () => {
+  it('should loadingToast work', async () => {
     const button = buttons[6].nativeElement;
     button.click();
     fixture.detectChanges();
+    await appRef.isStable;
+
     toastEle1 = document.querySelector('toast');
     expect(toastEle1.querySelector('.am-toast-text-info').innerText).toContain('Loading...', 'loadingToast work');
   });
@@ -179,7 +195,7 @@ export class TestToastComponent {
   @ViewChild('contentTpl')
   contentTpl: ViewChild;
 
-  constructor(private _toast: ToastService) {}
+  constructor(private _toast: ToastService) { }
 
   showToast() {
     this._toast.show('This is a toast tips !!!', 0, true, this.position);

diff --git a/components/toast/toast.service.ts b/components/toast/toast.service.ts
@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { ToastComponent } from './toast.component';
 import { ToastOptions } from './toast-options.provider';
+import { first } from 'rxjs/operators';
 
 export interface ConfigInterface {
   content?: any;
@@ -57,7 +58,7 @@ export class ToastService {
     return props;
   }
 
-  notice(config: ConfigInterface, type, timeInterval = 2000, onClose, mask = true, position = 'middle') {
+  async notice(config: ConfigInterface, type, timeInterval = 2000, onClose, mask = true, position = 'middle') {
     // 如果已经存在，在没有遮罩层的情况下，会响应别的toast，需要清除原来的
     if (this.compRef) {
       this.hide();
@@ -71,6 +72,12 @@ export class ToastService {
     this.insertElement = document.body.insertBefore(document.createElement(this.toastCompFactory.selector), document.body.firstChild);
     let instance: any;
     let subject: any;
+    // 需要等待应用程序稳定后再安装，比如在 ngOnInit 里调用
+    if (!this._zone.isStable) {
+      await this._appRef.isStable.pipe(
+        first(stable => stable)
+      )
+    }
 
     this.compRef = this._appRef.bootstrap(this.toastCompFactory);
     instance = this.compRef.instance;
@@ -84,7 +91,6 @@ export class ToastService {
         this.hide();
       }, timeInterval);
     }
-
     Object.assign(instance, props);
     return subject;
   }