在Angular Bootstrap中,循环依赖问题通常是由于在组件之间的相互引用导致的。以下是解决这个问题的示例代码:
import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
template: `
Modal
{{ message }}
`,
})
export class ModalComponent {
@Input() message: string;
constructor(public activeModal: NgbActiveModal) {}
}
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
constructor(private modalService: NgbModal) {}
openModal() {
const modalRef = this.modalService.open(ModalComponent);
modalRef.componentInstance.message = 'Hello from modal!';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal.component';
@NgModule({
imports: [BrowserModule, NgbModule],
declarations: [AppComponent, ModalComponent],
entryComponents: [ModalComponent], // 添加此行
bootstrap: [AppComponent],
})
export class AppModule {}
通过以上步骤,你可以在 Angular Bootstrap 中解决模态框的循环依赖问题。