angular - "Circular dependency detected"警告 - Angular

Question

这是我在网络浏览器中收到的警告。我想知道原因以及如何解决它。

客户端:135 检测到循环依赖: src\app\employee\employee.component.ts -> src\app\shared\service\employee.service.ts -> src\app\employee\employee.component.ts

这是我的 employee.component.ts 文件。

import {Component, OnInit} from '@angular/core';
import {EmployeeService} from '../shared/service/employee.service';
import {Employee} from '../shared/model/employee/employee.model';

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

  activeEmployee: Employee;

  constructor(private employeeService: EmployeeService) {
    this.activeEmployee = this.employeeService.getActiveEmployee();
  }

  ngOnInit(): void {
  }

  closeDialog(): void {
    // this.employeeService.dialogRef.close();
    this.employeeService.closeDialogBox();
  }
}

这是我的 employee.service.ts 文件。

import {Injectable} from '@angular/core';
import {Employee} from '../model/employee/employee.model';
import {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
import {EmployeeComponent} from '../../employee/employee.component';
import {Position} from '../model/employee/position.enum';
import {Status} from '../model/employee/status.enum';
import {Gender} from '../model/gender.enum';

const employeeSample = new Employee(2,
  'John Doe',
  '22, Sample Road, Sample 03',
  new Date(Date.parse('01/01/1995')),
  'XXXXXXXXX',
  '94-XXXXXXXX',
  'john@temporary-mail.net',
  Gender.MALE,
  Position.INTERN,
  Status.ACTIVE,
  null // password
);

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

  activeEmployee = employeeSample;
  dialogConfig: MatDialogConfig = new MatDialogConfig();
  dialogRef!: MatDialogRef<any>;

  constructor(public dialog: MatDialog
  ) {
    this.dialogConfig = {
      width: '60%',
      height: '100%',
      disableClose: true
    };
  }

  openDialogBox(): void {
    this.dialogRef = this.dialog.open(EmployeeComponent, this.dialogConfig);
  }

  closeDialogBox(): void{
    this.dialogRef.close();
  }

  getActiveEmployee(): Employee{
    return this.activeEmployee;
  }

}

Answer 1

那是因为你在 employee.component.ts 中注入(inject)了 employee.service.ts ，反之亦然。

理想情况下，服务不应控制 UI 组件。那是 component.ts 的工作。理想情况下，服务应与数据转换一起使用。

将 openDialogBox() 和 closeDialogBox() 方法移动到 employee.component.ts 中，并从您的文件中删除该组件的引用服务。