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

Question

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

我上载文档后发生实际的服务呼叫，如果上载了错误的文档，则服务会以错误消息响应。

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

但是，当我在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，而是猜测。 无法在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
    }
  }