Ng-zorro-antd: Notification 脏值检测BUG

[navisoftware]

完全按正常方式引入该组件
import {NzNotificationService} from 'ng-zorro-antd'; constructor(private info: NzNotificationService) { }
只要这个组件一打开就报这个错误:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: ''. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

[vthinkxie]

please make sure you only use NgZorroAntdModule.forRoot() function in root module.
If not so, please provide step to reproduce this error.
thanks.

[navisoftware]

我又测试了一下,放在app.component里面是没有任何问题.
但是如果我放在了子组件里面,有三层,如:
app-root>report-root>form-root>tree-root
如果在app-root或report-root里面注入都不会有问题
但如果report-root和form-root都没有注入,只在tree-root里面注册,一旦在form-root使用tree-root就会抛出这个异常.

but
如果我在整个引用路径(app-root>report-root>form-root>tree-root)中全部注入,则不会有问题....
刚刚测试出来的...
这坑是否太大了....难道没人在子组件里面引用过这个对象么?
还有其他类似的组件会不会有这个问题....

[trotyl]

http://plnkr.co/ or https://stackblitz.com/

[vthinkxie]

@navisoftware
you have to inject notification service in the component you use, other than its parent component.

[vthinkxie]

@navisoftware
This code works fine for me
Please CHECK your code again.

import { Component, OnInit } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';

@Component({
  selector: 'app-root',
  template: `
    <nz-root>
      <app-one-component>
        <app-two-component>
          <app-three-component>
            <app-four-component></app-four-component>
          </app-three-component>
        </app-two-component>
      </app-one-component>
    </nz-root>`,
  styles  : []
})

export class AppComponent {

  constructor() {
  }

}

@Component({
  selector: 'app-one-component',
  template: `
    <ng-content></ng-content>`,
  styles  : []
})

export class AppOneComponent {

}


@Component({
  selector: 'app-two-component',
  template: `
    <ng-content></ng-content>`,
  styles  : []
})

export class AppTwoComponent {

}

@Component({
  selector: 'app-three-component',
  template: `
    <ng-content></ng-content>`,
  styles  : []
})

export class AppThreeComponent {

}

@Component({
  selector: 'app-four-component',
  template: `
    <button nz-button (click)="notification()">测试</button>`,
  styles  : []
})

export class AppFourComponent implements OnInit {
  notification() {
    this.nzNotificationService.success('test', 'test');
  }

  constructor(private nzNotificationService: NzNotificationService) {
  }

  ngOnInit() {
  }
}

[vthinkxie]

Hi @navisoftware , the bug has been reproduced in #391 , please follow that issue, thanks.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.