Angular 4中的循环依赖，同时从另一个模式组件打开一个模式组件

Question

在我的应用程序中，我想打开一个模式弹出窗口供用户上传文件。所以我使用了下面的代码（使用角材料打开弹出窗口）：

在我上传文档后会发生实际的服务调用，如果上传错误的文档，则服务会响应错误消息。

我想要实现的是如果用户选择了不正确的文档，我想显示另一个弹出窗口（错误模式弹出窗口）。

但是，当我在 uploaddoc.component.ts 中导入 dialog.service.ts 时，出现以下错误

无法解析 UploaddocComponent 的所有参数

还在控制台中抛出警告：

检测到循环依赖中的警告： src\app\dialog.service.ts -> src\app\uploaddoc\uploaddoc.component.ts -> src\app\dialog-service.service.ts

检测到循环依赖中的警告： src\app\uploaddoc\uploaddoc.component.ts -> src\app\dialog.service.ts -> src\app\uploaddoc\uploaddoc.component.ts

注意：UploaddocComponent 和 ErrorModalComponents 都添加到 app.module.ts 的 entryComponents 数组中，因为它们都是动态组件。

下面是我的代码（转载于stackblitz）

主组件（打开上传弹窗）：

HTML

<button type="button" (click)="openUpload()">Open Upload Popup</button>

Component.ts

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogService } from './dialog.service';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  constructor(public dialog: MatDialog,private dialogsService: DialogService){

  }
  public openUpload(){
    this.dialogsService.openUploadDialog(UploaddocComponent);
  }
}

我的dialog.service.ts

import { Injectable } from '@angular/core';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class DialogService {

  constructor(private dialog: MatDialog) { }
  public infoPopup(): Observable<boolean> {

        let dialogRef: MatDialogRef<ErrorModalComponent>;

        dialogRef = this.dialog.open(ErrorModalComponent);
        dialogRef.componentInstance.data = "error";
        return dialogRef.afterClosed();
    }

     public openUploadDialog(data: Object): Observable<boolean> {

        let dialogRef: MatDialogRef<UploaddocComponent>;

        dialogRef = this.dialog.open(UploaddocComponent);
        dialogRef.componentInstance.data = data;
        return dialogRef.afterClosed();
    }

}

upload.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { DialogService } from '../dialog.service';
import { ErrorModalComponent } from '../error-modal/error-modal.component';
@Component({
  selector: 'app-uploaddoc',
  templateUrl: './uploaddoc.component.html',
  styleUrls: ['./uploaddoc.component.css']
})
export class UploaddocComponent implements OnInit {

  constructor(public dialogService: DialogService) { }
  data: any;
  ngOnInit() {
  }

  public uploadDoc() {
    //in this method actual service call happens and check if correct document is uploaded or not.
    // Service side sends error if wrong document is uploaded.
    // If wrong doc is uploaded then I want to display Error component here
    // I will simulate service call here with delay and will open ErrorModal

    of(['some data']).pipe(
      delay(2000)
    ).subscribe((res)=>{
      console.log(res);
      // suppose error occured here then I want to open error modal So I added `dialog.service.ts` here in this component

      this.dialogService.infoPopup();
    })
  }
}

upload.component.html

<p>
Upload popup works

<button type="button" (click)="uploadDoc()">Do upload</button>
</p>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Components } from './materialComponents';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { DialogService } from './dialog.service';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [BrowserModule, FormsModule, ...Components,BrowserAnimationsModule],
  declarations: [AppComponent, HelloComponent, UploaddocComponent, ErrorModalComponent],
  bootstrap: [AppComponent],
  entryComponents: [UploaddocComponent, ErrorModalComponent],
  providers: [DialogService]
})
export class AppModule { }

我不确定我应该如何处理循环依赖。

我可能没有完全理解 ngModule，只是猜测；无法在 app.module.ts 中 entryComponents 数组中添加的组件中注入服务。

我在这里做错了什么？

Answer 1

我尝试了以下方法：

将uploaddoc.component.ts修改为：

import { Component, OnInit, Injector } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { DialogService } from '../dialog.service';
import { ErrorModalComponent } from '../error-modal/error-modal.component';
@Component({
  selector: 'app-uploaddoc',
  templateUrl: './uploaddoc.component.html',
  styleUrls: ['./uploaddoc.component.css']
})
export class UploaddocComponent implements OnInit {

  constructor(private injector: Injector) {
    this.dialogsService = this.injector.get(DialogsService);
  }
  data: any;
  ngOnInit() {
  }

  public uploadDoc() {

    of(['some data']).pipe(
      delay(2000)
    ).subscribe((res)=>{
      console.log(res);
      // suppose error occured here then I want to open error modal So I added `dialog.service.ts` here in this component

      this.dialogService.infoPopup();
    })
  }
}

我已经使用@angular/core 中的injector 来显式获取服务实例，现在不再出现错误。 但是我仍然可以看到警告。为了删除警告，我在 .angular-cli.json 中添加了以下内容

 "defaults": {
    ....
    "build": {
      "showCircularDependencies": false
    }
  }