Question

由于我正在将这些组件用于另一个组件，因此我得到了循环依赖，我有四个不同的组件，如下所示，

MasterListComponent.ts
MasterDetailComponent.ts
ChildListComponent.ts
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 Component并得到循环依赖错误。

如何解决此问题？

Answer 1

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

检查 WORKING STACKBLITZ

我在这里使用服务将数据从模态共享到父组件

您的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);
      });
  }

}

角度之间的零件之间的圆形依赖性

1 个答案: