循環参照を検知してテストで落とす、といったことをするのは最近だとdependency-cruiserが有力でしょうか。
実装自体を改善したいのであれば、循環参照している実装方法はそもそもどこかが間違っている可能性が高いです。
改善のパターンとしては、UserSearchDialogComponentとDepartmentSearchDialogComponentの共通部分を切り出して互いに依存させる方法と考えられます。いわゆる抽象に依存する方法です(SOLIDの原則)。
Dependency Injection、Mixin、Mediatorパターン、EventEmitterなどを利用して実装するなど方法が考えられます。
色々と書き方はあると思いますが、イメージしやすいように一例として次のようなサンプルを示しておきます。
// types.ts
export interface BaseComponent {
// 自分自身のダイアログを開く
showDialog: () => void;
// 別のコンポーネントを登録する(外部の依存を取り込む)
register: (anotherComponent: BaseComponent) => void;
// 別のcomponentのダイアログを開く
showAnotherDialog: () => void;
}
// department-search-dialog.component.ts
import type { BaseComponent } from "./types";
export class DepartmentSearchDialogComponent implements BaseComponent {
private anotherComponents: BaseComponent[] = [];
constructor() {}
public register(anotherComponent: BaseComponent) {
this.anotherComponents.push(anotherComponent);
}
public showAnotherDialog() {
this.anotherComponents.forEach(anotherComponent => {
anotherComponent.showDialog();
})
}
public showDialog() {
}
}
// user-search-dialog.component
import type { BaseComponent } from "./types";
export class UserSearchDialogComponent implements BaseComponent {
private anotherComponents: BaseComponent[] = [];
constructor() {}
public register(anotherComponent: BaseComponent) {
this.anotherComponents.push(anotherComponent);
}
public showAnotherDialog() {
this.anotherComponents.forEach(anotherComponent => {
anotherComponent.showDialog();
})
}
public showDialog() {
//
}
}
// main.ts
import { UserSearchDialogComponent } from "./user-search-dialog.component";
import { DepartmentSearchDialogComponent } from "./department-search-dialog.component"
function main() {
const userSearchDialogComponent = new UserSearchDialogComponent();
const departmentSearchDialogComponent = new DepartmentSearchDialogComponent();
userSearchDialogComponent.register(departmentSearchDialogComponent);
departmentSearchDialogComponent.register(userSearchDialogComponent);
userSearchDialogComponent.showAnotherDialog(); // departmentSearchDialogComponentも開く
departmentSearchDialogComponent.showAnotherDialog(); // userSearchDialogComponentも開く
}
こういう感じで切り出すと循環参照を発生させずに済みます。どういった実装が適切かはケースバイケースなので、現状こたえられるのはこれくらいです。