Question

这就是我使用ng2-bootstrap模式的方式：

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'add-customer-modal',
  template: `
    <template #test let-c="close" let-d="dismiss">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
      </div>
    </template>
    <button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>
  `
})
export class AddCustomerModal {

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, { size: 'lg' }).result.then((result) => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }
}

我有点困惑，因为我认为内容用于将参数传递给模态。但在我看来，只有open方法需要找到正确模板的名称？

那么如何传递参数呢？

Answer 1

要将参数/数据传递给模态，我的猜测是使用componentInstance：

open(content) {
    const modal: NgbModalRef = this.modalService.open(content, { size: 'lg' });

    (<MyComponent>model.componentInstance).data = 'hi';

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

这假设componentInstance的类型为MyComponent，并且它具有公共属性data

Answer 2

任何仍然磕磕绊绊的人都会觉得这很方便，你需要做的就是在你的ModalComponent中声明一个字段，如下所示：

 modalHeader: string;
 advertiser: Advertiser;

您可以在打开模式时执行以下操作来设置这些字段。

advertiserModalShow() {
    const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
    activeModal.componentInstance.modalHeader = 'Advertiser';
    activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}

在您的模板中，您可以像这样访问它们：

value={{advertiser.code}}

希望这有帮助。

Answer 3

以下是如何将数据传递到Angular2中的HTML模板

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'add-customer-modal',
template: `
<template #test let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
     {{MESSAGE_DATA}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>
<button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>`})

export class AddCustomerModal {
   MESSAGE_DATA : any;
   constructor(private modalService: NgbModal) {}

   open(content) {
      this.MESSAGE_DATA = "PASS DATA TO ANGULAR2 MODAL"
      this.modalService.open(content, { size: 'lg' }).result.then((result) => {
         console.log(result);
      }, (reason) => {
      console.log(reason);
    });
 }
}

检查HTML模板中如何使用MESSAGE_DATA。

Answer 4

我建议您在这里查看Child Modal示例ng2-bootstrap documentation for modals。只需将公共变量添加到父组件，并使用标准绑定技术在模式中使用它们。

因此在示例中将此添加到模板中，如下所示：

      <div class="modal-body">
          {{parentMessage}}
      </div>

并像这样更改组件：

export class DemoModalChildComponent {
  @ViewChild('childModal') public childModal:ModalDirective;
  parentMessage = 'I am a child modal, opened from parent component!'; //Add this

现在您要从父组件传递数据，您可以按照标准模式将数据传递给父组件。

Answer 5

如果需要在模态构造后立即获取数据，则有更好的方法来处理模态中的数据。使用有角度的 injector 技术。

定义数据模型。

class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}

在组件中的某个位置构建模态：

this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});

处理在模态组件中检索的数据

@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}

Answer 6

在 Angular 8 中用于 ng-bootstrap 尝试

完成教程here

  openModal() {
    const modalRef = this.modalService.open(MyBootstrapModalComponent,
      {
        scrollable: true,
        windowClass: 'myCustomModalClass',
        // keyboard: false,
        // backdrop: 'static'
      });

    let data = {
      prop1: 'Some Data',
      prop2: 'From Parent Component',
      prop3: 'This Can be anything'
    }

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

如何将参数传递给模态？

6 个答案: