角组件之间的圆形依赖性

Question

我得到了圆形依赖性，因为我将组件使用到另一个组件中，我的四个不同的组件如下，

1. MasterListComponent.TS
2. MasterDetailComponent.TS
3. childlistcomponent.ts
4. childdetailcomponent.ts

在MasterListComponents中，我将MasterDetailComponent.ts用作模型弹出式

import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap';
import { MasterDetailComponent } from '../master-detail/master-detail.component';
@Component({
  selector: 'master-list',
  templateUrl: './master-list.component.html',
  providers: [MasterDetailComponent , BsModalRef],
})
export class MasterListComponent implements OnInit {
constructor(private modalService: BsModalService) {
  }
showMasterChildComponent() {
setTimeout(() => {this.bsModalRef = this.modalService.show(MasterDetailComponent, {
      initialState: {
        itemList: data['data'
      },
      class: 'modal-lg'
    })}, 1000); 
  }
}

在ChildDetailCompnent中使用相同的MasterDetail组件，如下所示

import { MasterListComponent } from './master-list/master-list.component';
@Component({
  selector: 'child-detail-view',
  templateUrl: './child-detail.component.html',
  providers: [MasterListComponent],
})
export class ChildDetailComponent implements OnInit {
constructor(
    public bsModalRef: BsModalRef,
    private modalService: BsModalService,
    private e_handlet: MasterListComponent) {
  }
showMasterDetailComponent() {
    this.e_handlet.showMasterChildComponent(eventId);
  }
}

现在，我想在MasterDetailComponent中调用ChildDetail组件并获得循环依赖性错误。

如何解决此问题？

Answer 1

让我展示一个确认对话模式的示例

检查 工作stackblitz

我在此处使用服务来共享模式的数据到parent component

您的app.module.ts类似：〜

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ModalModule } from 'ngx-bootstrap/modal';
import { MessageService } from './message.service';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
@NgModule({
  declarations: [
    AppComponent,
    ConfirmDialogComponent,
  ],
  imports: [
    BrowserModule,
    ModalModule.forRoot(),
  ],
  providers: [
    MessageService,
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    ConfirmDialogComponent,
  ]
})
export class AppModule { }

service.ts可以像下面类似：〜

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
@Injectable()
export class MessageService {
  bsModalRef: BsModalRef;
  constructor(
    private bsModalService: BsModalService,
  ) { }
  confirm(title: string, message: string, options: string[]): Observable<string> {
    const initialState = {
      title: title,
      message: message,
      options: options,
      answer: "",
    };
    this.bsModalRef = this.bsModalService.show(ConfirmDialogComponent, { initialState });
    return new Observable<string>(this.getConfirmSubscriber());
  }
  private getConfirmSubscriber() {
    return (observer) => {
      const subscription = this.bsModalService.onHidden.subscribe((reason: string) => {
        observer.next(this.bsModalRef.content.answer);
        observer.complete();
      });
      return {
        unsubscribe() {
          subscription.unsubscribe();
        }
      };
    }
  }
}

confirm-dialog.component类似下面的东西：〜

export class ConfirmDialogComponent {
    title: string;
    message: string;
    options: string[];
    answer: string = "";
    constructor(
        public bsModalRef: BsModalRef,
    ) { }
    respond(answer: string) {
        this.answer = answer;
        this.bsModalRef.hide();
    }
}

parent.component.ts类似下面的东西：〜

import { Component } from '@angular/core';
import { MessageService } from './message.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  answers: string[] = [];
  constructor(
    private messageService: MessageService,
  ) {
  }
  confirm() {
    this.messageService.confirm(
      "Confirmation dialog box",
      "Are you sure you want to proceed?",
      ["Yes", "No"])
      .subscribe((answer) => {
        this.answers.push(answer);
      });
  }
}