Question

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

我上传文件后发生实际服务电话，如果上传错误文件，则服务会回复错误信息。

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

然而，当我在uploaddoc.component.ts中导入dialog.service.ts时，会给我以下错误

无法解析UploaddocComponent的所有参数

还在控制台中发出警告说：

检测到循环依赖关系中的警告：   src \ app \ dialog.service.ts - ＆gt;   src \ app \ uploaddoc \ uploaddoc.component.ts - ＆gt;   SRC \应用\对话框的service.service.ts

检测到循环依赖关系中的警告：   src \ app \ uploaddoc \ uploaddoc.component.ts - ＆gt;   src \ app \ dialog.service.ts - ＆gt;   SRC \应用\ uploaddoc \ uploaddoc.component.ts

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

以下是我的代码（并在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();
    })
  }
}

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

中添加了以下内容

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

从另一个

1 个答案: