BS Modal Service Angular Pass Data

如果想使用Bootstrap模态框来进行Angular应用程序开发并向其中传递数据，那么可以使用ng-bootstrap模块提供的模态框服务。这种模式下开发效率高，易于扩展和维护。

安装ng-bootstrap模块

首先在终端中使用npm安装ng-bootstrap模块。

npm install --save @ng-bootstrap/ng-bootstrap

导入NgBootstrap模块

然后在app.module.ts中导入NgBootstrap模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

定义模态框组件

接下来定义一个带有输入属性和输出事件的组件，以便可以接受和传递数据：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal-component',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{ title }}</h4>
      <button type="button" class="close" aria-label="Close" (click)="dismiss()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      {{ message }}
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="dismiss()">Close</button>
      <button type="button" class="btn btn-primary" (click)="submit()">Submit</button>
    </div>
  `
})
export class ModalComponent {
  @Input() title: string;
  @Input() message: string;

  @Output() onSubmit = new EventEmitter<boolean>();
  @Output() onClose = new EventEmitter<boolean>();

  submit() {
    this.onSubmit.emit(true);
  }

  dismiss() {
    this.onClose.emit(true);
  }
}

使用模态框服务

现在在需要打开模态框的组件中引入和使用模态框服务。在这个例子中，一个按钮被点击后将会弹出一个模态框并显示一个消息。

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="open()">Open Modal</button>
  `
})
export class AppComponent {

  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(ModalComponent);
    modalRef.componentInstance.title = 'Modal Title';
    modalRef.componentInstance.message = 'Message to display.';

    modalRef.result.then(result => {
      console.log(result);
    }, reason => {
      console.log(reason);
    });
  }
}

解释代码

1. 在AppComponent中，我们创建了一个新模态框并为其设置了标题和消息。
2. 然后调用模态框的result属性以等待模态框的返回值。
3. 当模态框关闭时，我们将会用回调函数来处理模态框的返回值。

从这个例子中可以看到，使用ng-bootstrap模块的模态框服务，传递数据非常容易。做到了代码简洁，易于维护和扩展。