angular - 角度组件之间的循环依赖

Question

我得到循环依赖，因为我将组件使用到另一个组件中，我有四个不同的组件，如下所示，

1. 主列表组件.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 组件并得到循环依赖错误。

如何解决这个问题？

标签： angulartypescriptpopup

Answer 1

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

检查 工作堆栈闪电

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

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

}