NullInjectorError: No provider for NzModalRef!

原文链接：NullInjectorError: No provider for NzModalRef! – 每天进步一点点 (longkui.site)

0.背景

调试一个angular项目是出现了路由错误，报错没有找到这个路由。打开F12看报错信息，看到下面这些：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TestComponent -> NzModalRef]:
StaticInjectorError(Platform: core)[TestComponent -> NzModalRef]:
NullInjectorError: No provider for NzModalRef!
Error: StaticInjectorError(AppModule)[TestComponent -> NzModalRef]:
StaticInjectorError(Platform: core)[TestComponent -> NzModalRef]:
NullInjectorError: No provider for NzModalRef!

1.原因及解决办法

NzModalRef 是一个动态产生模态框的组件，通过它可以动态的创建Modal。

上面的问题原因的出于下面的代码，

import { Component, OnInit } from '@angular/core';
import {NzModalRef } from "ng-zorro-antd";
@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less']
})
export class TestComponent implements OnInit {

  constructor(
    editModal:NzModalRef
  ) { }

  ngOnInit() {
  }

}

解决办法1：

删除 NzModalRef 的导入和 construtor里面有关的内容

解决办法2：

上面editModal:NzModalRef 的部分不对，可以改成下面这样

  constructor(
 
  ) { }

   editModal:NzModalRef
  ngOnInit() {
  }

这样就正常了，不会报错了。

2.使用方法

正确使用NzModalRef的参考代码：

import {Component, OnInit, TemplateRef} from '@angular/core';
import {NzMessageService, NzModalRef, NzModalService} from "ng-zorro-antd";
@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less']
})
export class TestComponent implements OnInit {

  constructor(
    private modalService: NzModalService,
    private message: NzMessageService,
  ) { }
  editModal:NzModalRef
  ngOnInit() {
  }

  openModal(title: TemplateRef<{}>, content: TemplateRef<{}>, footer: TemplateRef<{}>): void {
    this.editModal = this.modalService.create({
      nzTitle: title,
      nzContent: content,
      nzFooter: footer,
      nzWidth:1200,
      nzMaskClosable: false
    });
  }

}