时间戳

首页 > 解决方案 > 如何解决循环依赖（服务）

angular - 如何解决循环依赖（服务）

问题描述

我有两个组件之间的循环依赖。我知道是这样，而且我有一些额外的守卫来阻止这个圈子。但是，编译时我无法关闭通知。

我有一个聊天应用程序，因为home您可以从组件中打开该profile组件，所以会出现圆圈。从profile组件中，您可以选择向他们发送短信，现在当您在chat组件中时，您可以单击他们的头像，它将打开配置文件组件。进入这个圈子的另一种方法是，当您导航到聊天选项卡并单击要发送消息的人，然后单击他们的头像并打开个人资料组件，如果您单击“发送消息”，则会打开该chat组件

我所做的是监视他们如何访问页面，如果您profile从chat组件访问组件，那么您无需打开chat组件，而是关闭配置文件以返回。效果很好，但是，这个循环依赖警告很烦人。

有没有办法防止这种循环依赖？如果没有，我该如何关闭警告？

home.component

this.modalService.openProfile(doctor, ProfileComponent);

profile.component/html

public async openChat(ev: any) {
  this.modalService.openChat(this.contact, ChatComponent); //pass reference
}

 <ng-container *ngIf="sentFrom === 'chat'; else homePage ">
      <ion-button (click)="closeProfile()" color="primary" slot="start"><ion-icon name="paper-plane"></ion-icon>Enviar Mensaje</ion-button>    
    </ng-container>
    <ng-template #homePage>
      <ion-button (click)="openChat()" color="primary" slot="start"><ion-icon name="paper-plane"></ion-icon>Enviar Mensaje</ion-button>    
    </ng-template>

聊天组件

public async openProfile() {
  this.modalService.openProfile(this.contact, ProfileComponent); 
}
//similar guard on the HTML page

模态服务

import { ModalController } from '@ionic/angular';

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

  constructor(private modalCtrl: ModalController) {}

  public async openChat(contact: Contact, modal: any) {
    const chat = await this.modalCtrl.create({
      component: modal,
      animated: true,
      componentProps: {contact}
    });
    return await chat.present();
  }

  public async openProfile(contact: Contact, modal: any) { 
    const profile = await this.modalCtrl.create({
      component: modal,
      animated: true,
      componentProps: {contact}
    });
    return await profile.present();
  }
  public dismiss() {
    return this.modalCtrl.dismiss();
  }
}

 WARNING in Circular dependency detected:
[ng] src/Components/chat/chat.component.ts -> src/Components/profile/profile.component.ts -> src/Components/chat/chat.component.ts
[ng] WARNING in Circular dependency detected:
[ng] src/Components/profile/profile.component.ts -> src/Components/chat/chat.component.ts -> src/Components/profile/profile.component.ts

标签： angularionic-framework

解决方案

推荐阅读