“检测到循环依赖”警告 - 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.service.tsin employee.component.ts，反之亦然。

理想情况下，服务不应控制 UI 组件。这就是 component.ts 的工作。理想情况下，服务应该与数据转换配合使用。

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