tl; dr：向下滚动到解决方案
我有一个循环依赖项，并且正在收到警告，这是正确的，但是，我正在对其进行管理。问题是我有一个聊天组件。在角落，您可以选择查看他们的个人资料页面，而在他们的个人资料页面中，您可以选择向他们发送消息，因此是循环依赖性。我正在通过管理
public async openProfile(): Promise {
this.modalCtrl.dismiss(); //closing the chat component before opening the profile modal
const profile = await this.modalCtrl.create({
component: ProfileComponent,
});
await profile.present();
}
public async openChat(): Promise {
this.modalCtrl.dismiss(); //closing the profile component before opening the chat modal
const chat = await this.modalCtrl.create({
component: ProfileComponent,
});
await chat.present();
}
有没有更简单的方法来处理这种循环依赖关系？
更新：根据下面的建议，我尝试创建服务。但是现在我有了一个三向依赖圈：
private modalService: ModalService;
constructor(modalService: ModalService){
this.modalService = modalService
}
public async openProfile(): Promise {
this.modalService.openProfile(this.userData);
}
private modalService: ModalService;
constructor(modalService: ModalService){
this.modalService = modalService
}
public async openChat(): Promise {
this.modalService.openChat(this.userData);
}
import { ModalController } from '@ionic/angular';
import { Injectable } from '@angular/core';
import { ProfileComponent } from '../../components/profile/profile.component';
import { ChatComponent } from '../../components/chat/chat.component';
import { UserData } from '../../interfaces/UserData/userData.interface';
@Injectable({
providedIn: 'root',
})
export class ModalService {
private modal: ModalController;
public constructor(modal: ModalController) {
this.modal = modal;
}
public async openProfileComponent(user: UserData): Promise {
this.modal.dismiss();
const profile = await this.modal.create({
component: ProfileComponent,
componentProps: {
contact: user,
},
});
await profile.present();
}
public async openChatComponent(user: UserData): Promise {
this.modal.dismiss();
const chat = await this.modal.create({
component: ChatComponent,
componentProps: {
contact: user,
},
});
await chat.present();
}
public close(): void {
this.modal.dismiss();
}
}
UPDATE Stackblitz对于Ionic 4来说太不稳定了，因此我无法在上面复制它，因此这里是信息和相关代码的要点。
UPDATE2
我接受了答案中提到的建议，但仍然收到错误。为了做到这一点，我创建了一个shared.module.ts看起来像这样的：
import { UserService } from './componentServices/user/user.service';
import { ModalService } from './componentServices/modal/modal.service';
import { AuthenticationSecurityService } from './componentServices/auth_security/authentication-security.service';
import { AuthGuardService } from '../_guards/auth-guard.service';
import { ApiService } from './componentServices/api/api.service';
import { ChatService } from './components/chat/socketIO/chat.service';
@NgModule({
imports: [CommonModule, ReactiveFormsModule, IonicModule.forRoot(), FormsModule, IonicModule],
declarations: [
// various components
],
exports: [
// various components and common modules
],
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
UserService,
ModalService,
DashboardService,
AuthenticationSecurityService,
AuthGuardService,
ApiService,
ChatService,
],
};
}
}
imports: [
SharedModule.forRoot(),
]
client:135 Circular dependency detected: src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts client:135 Circular dependency detected: src/sharedModules/components/chat/chat.component.ts -> src/sharedModules/components/search/search.component.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/chat/chat.component.ts client:135 Circular dependency detected: src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/profile/profile.component.ts client:135 Circular dependency detected: src/sharedModules/components/search/search.component.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/chat/chat.component.ts -> src/sharedModules/components/search/search.component.ts解
正如@ bryan60和@Luis所说，必须有一个缓冲区，所以我所做的就是遵循他们俩都建议的发射路线。Bryan给出了更多代码，其中Luis给出了重要的职责摘要。这是我重构的方式：
imports: [
SharedModule.forRoot(),
]
client:135 Circular dependency detected: src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts client:135 Circular dependency detected: src/sharedModules/components/chat/chat.component.ts -> src/sharedModules/components/search/search.component.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/chat/chat.component.ts client:135 Circular dependency detected: src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/profile/profile.component.ts client:135 Circular dependency detected: src/sharedModules/components/search/search.component.ts -> src/sharedModules/components/profile/profile.component.ts -> src/sharedModules/componentServices/modal/modal.service.ts -> src/sharedModules/components/chat/chat.component.ts -> src/sharedModules/components/search/search.component.ts
public initializeApp(): void {
this.platform.ready().then((): void => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this._subToObservables();
});
}
private _subToObservables(): void {
this.modalService.openModal$.subscribe(
async (e: ModalEmitInterface): Promise => {
const { command, data } = e;
switch (command) {
case 'open-profile':
const profile = await this.modalCtrl.create({
component: ProfileComponent,
componentProps: {
contact: data,
},
});
await profile.present();
break;
case 'open-chat':
// same as above
break;
default:
break;
}
},
);
}
chat.component.ts
export class ModalService {
private openModalSubject: Subject = new Subject();
public readonly openModal$: Observable = this.openModalSubject.asObservable();
private emitPayload: ModalEmitInterface;
public openProfileComponent(user: UserData): void {
this.emitPayload = {
command: 'open-profile',
data: user,
};
this.openModalSubject.next(this.emitPayload);
}
// repeat for others
}
就是这样，尽管您仍然需要确保要关闭模式，否则它们将继续堆叠。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有