自定义对话框循环依赖答案

【问题标题】：Custom dialog circular dependency自定义对话框循环依赖
【发布时间】：2018-09-05 22:28:08
【问题描述】：

我遇到了由我的自定义 Injector 创建的循环依赖项代码运行良好，直到到达这一行：

const componentPortal = new ComponentPortal(ConfirmDialogComponent, null, customInjector);

这会在终端和浏览器的控制台中产生以下错误：

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

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

并在浏览器的控制台中产生此错误：

未捕获的错误：无法解析 ConfirmDialogComponent 的所有参数：(?)。

@Injectable({
  providedIn: 'root'
})
export class ConfirmDialogService {

  constructor(
    private overlay: Overlay,
    private injector: Injector,
  ) { }

  public open() {
    const overlayRef = this.overlay.create();
    const dialogRef = new CustomOverlayRef(overlayRef);
    const customInjector = this.createInjector(dialogRef);
    const componentPortal = new ComponentPortal(ConfirmDialogComponent, null, customInjector);
    const componentRef = overlayRef.attach(componentPortal);
  }

  private createInjector(customOverlayRef: CustomOverlayRef) {
    const injectionTokens = new WeakMap();
    injectionTokens.set(CustomOverlayRef, customOverlayRef);
    return new PortalInjector(this.injector, injectionTokens);
  }
}

export class CustomOverlayRef {

  constructor(
    private overlayRef: OverlayRef,
  ) { }

  public close() {
    this.overlayRef.dispose();
  }

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent implements OnInit {

  constructor(
    private customDialogRef: CustomOverlayRef,
  ) { }

  ngOnInit() {
  }

  public close() {
    this.customDialogRef.close();
  }

}

【问题讨论】：

请添加ConfirmDialogComponent的相关部分。您可能已经将组件相互导入到服务中，反之亦然。但是，这不是错误，而是您当然不应该忽略的警告。与此处相同：stackoverflow.com/questions/46113734/…
我添加了ConfirmDialogComponent 代码。由于我忘记提及的错误，它会阻止应用程序加载。

标签： angular

【解决方案1】：

循环依赖的问题是由服务中的CustomOverlayRef类声明引起的。

这也会导致程序一起崩溃。

我在一个单独的文件夹中声明了它，现在一切正常。

【讨论】：

但是你还没有收到编译警告吗？我有完全相同的设置，我收到警告....没有错误，它可以工作....但是警告。

【解决方案2】：

这有时会在服务的@Injectable 中使用providedIn 参数发生。尝试从该位置删除它并将其添加到 app.module 的提供程序部分。

@Injectable()
export class ConfirmDialogService

app.module:

providers: [ConfirmDialogService]

【讨论】：

不幸的是我已经尝试过了。警告和错误仍然显示。