![](/img/trans.png)
[英]Latest Angular upgrade caused NullInjectorError: R3InjectorError(n)
[英]ERROR NullInjectorError: R3InjectorError(n)[_0 -> _0 -> _0]: NullInjectorError: No provider for _0! --- When using Angular MatDialog
嘗試打開 Angular MatDialog 時,我在運行時遇到此錯誤。 我做了一些研究,發現了很多與缺少提供程序問題相關的帖子,但是由於這條消息對我來說不清楚,我不知道缺少的內容是否是我的app.module.ts
中的提供程序或如果是別的東西。
關於我的對話框,我試圖從一個列出項目的組件中打開它,並且該對話框應該打開一個表單來維護這個項目。
這是我的文件:
app.module.ts
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MatDialogModule } from '@angular/material/dialog';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'
import { AppComponent } from './app.component';
import { CreateWorkerComponent } from './component/create-worker/create-worker.component';
import { MaintainWorkGroupComponent } from './component/maintain-work-group/maintain-work- group.component';
import { Session } from './model/entity/Session';
import { ListWorkGroupComponent } from './component/list-work-group/list-work- group.component';
import { ItemWorkGroupComponent } from './component/item-work-group/item-work- group.component';
@NgModule({
declarations: [
AppComponent,
CreateWorkerComponent,
MaintainWorkGroupComponent,
ListWorkGroupComponent,
ItemWorkGroupComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
MatDialogModule,
MatCardModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule
],
providers: [
Session,
AppComponent,
ItemWorkGroupComponent,
MaintainWorkGroupComponent
],
bootstrap: [AppComponent],
entryComponents: [
ItemWorkGroupComponent,
MaintainWorkGroupComponent
]
})
export class AppModule { }
我打開對話框的組件:
item-work-group.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Session } from '../../model/entity/Session';
import { WorkGroup } from '../../model/entity/WorkGroup';
import { MaintainWorkGroupComponent } from '../maintain-work-group/maintain-work-group.component';
@Component({
selector: 'app-item-work-group',
templateUrl: './item-work-group.component.html',
styleUrls: ['./item-work-group.component.css']
})
export class ItemWorkGroupComponent implements OnInit {
@Input() workGroup!: WorkGroup;
private maintainWorkGroup: MaintainWorkGroupComponent;
private dialogRef!: MatDialogRef<MaintainWorkGroupComponent>;
constructor(private session: Session, private matDialog: MatDialog) {
this.maintainWorkGroup = new MaintainWorkGroupComponent(this.session, this.workGroup, this.dialogRef);
}
ngOnInit(): void {
}
public openMaintainDialog() {
this.dialogRef = this.matDialog.open(MaintainWorkGroupComponent, {
autoFocus: true,
closeOnNavigation: true,
});
this.dialogRef.componentInstance = this.maintainWorkGroup;
this.dialogRef.afterClosed().subscribe(result => {} });
}
}
item-work-group.component.html
<tr>
<td scope="col">
{{ this.workGroup.name }}
</td>
<td>
{{ this.workGroup.description }}
</td>
<td>
<a href="#" class="btn btn-sm btn-primary my-1 my-sm-0" (click)="openMaintainDialog()">
<span class="fas fa-edit mr-1"></span>
Edit
</a>
<a href="#" class="btn btn-sm btn-danger my-1 my-sm-0">
<span class="fas fa-trash mr-1"></span>
Delete
</a>
</td>
</tr>
我的對話框組件:
maintain-work-group.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { Session } from '../../model/entity/Session';
import { WorkGroup } from '../../model/entity/WorkGroup';
import constants from '../../util/constants';
@Component({
selector: 'app-maintain-work-group',
templateUrl: './maintain-work-group.component.html',
styleUrls: ['./maintain-work-group.component.css']
})
export class MaintainWorkGroupComponent implements OnInit {
public workGroup!: WorkGroup;
private session!: Session;
private operationType: string = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.POST;
constructor(session: Session, workGroup: WorkGroup | null, public thisDialogRef: MatDialogRef<MaintainWorkGroupComponent>) {
if (!workGroup)
this.workGroup = new WorkGroup("", "");
else
this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.PUT;
this.session = session;
}
ngOnInit(): void {
}
public onSubmit(form: NgForm): void {
if (this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.POST)
this.session.apiManager.WorkGroupApi.createWorkGroup(this.workGroup);
else
this.session.apiManager.WorkGroupApi.updateWorkGroup(this.workGroup);
//this.session.apiManager.PostApi.createPost(post);
this.thisDialogRef.close();
}
public onClose(): void {
this.thisDialogRef.close();
}
}
maintain-work-group.component.html
<div class="card spur-card">
<div class="card-header">
<div class="spur-card-icon">
<i class="fas fa-chart-bar"></i>
</div>
<div class="spur-card-title"> Grupo de Trabalho </div>
</div>
<div class="card-body ">
<form novalidate #form="ngForm" (ngSubmit)="onSubmit(form)">
<div class="form-group">
<label for="name">Nome</label>
<input type="text" class="form-control" name="name" id="name"
required minlength="1" [(ngModel)]="this.workGroup.name">
</div>
<div class="form-group">
<label for="description">Descrição</label>
<textarea name="description" class="form-control" rows="3" id="description"
required minlength="5" [(ngModel)]="this.workGroup.description"></textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.form.valid">Salvar</button>
<button type="submit" (click)="onClose()" class="btn btn-primary btn-form">Cancelar</button>
</form>
</div>
</div>
整個錯誤信息:
ERROR NullInjectorError: R3InjectorError(n)[_0 -> _0 -> _0]:
NullInjectorError: No provider for _0!
at G_.get (main.5e92b1842e25d401b10e.js:1)
at FI.get (main.5e92b1842e25d401b10e.js:1)
at FI.get (main.5e92b1842e25d401b10e.js:1)
at FI.get (main.5e92b1842e25d401b10e.js:1)
at nk.get (main.5e92b1842e25d401b10e.js:1)
at Object.get (main.5e92b1842e25d401b10e.js:1)
at ng (main.5e92b1842e25d401b10e.js:1)
at ig (main.5e92b1842e25d401b10e.js:1)
at _ (main.5e92b1842e25d401b10e.js:1)
at Ys.n.ɵfac [as factory] (main.5e92b1842e25d401b10e.js:1)
lT @ main.5e92b1842e25d401b10e.js:1
handleError @ main.5e92b1842e25d401b10e.js:1
$_ @ main.5e92b1842e25d401b10e.js:1
Py @ main.5e92b1842e25d401b10e.js:1
s @ main.5e92b1842e25d401b10e.js:1
(anonymous) @ main.5e92b1842e25d401b10e.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
onInvokeTask @ main.5e92b1842e25d401b10e.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
runTask @ polyfills.736aa85c1272f550163c.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
S @ polyfills.736aa85c1272f550163c.js:1
D @ polyfills.736aa85c1272f550163c.js:1
提前致謝!
好吧,我最終放棄在我的應用程序中使用對話框,但后來我遇到了一個非常相似的問題,我在嘗試創建stackblitz時發現了完全空注入,它提供了更詳細的錯誤。 在此基礎上,我想我需要添加MatDialog( MatDialogModule
我) providers
我的內部app.module.ts
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.