NullInjectorError: No provider for NzModalRef!

原文链接：https://www.longkui.site/program/frontend/nullinjectorerror-no-provider-for-nzmodalref/4926/

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
});
}

}