Question

我正在构建一个类似仪表板的界面，其中包含一组包含可比数据的实体。这些实体中的每一个都有一个编辑按钮，我想用它来打开一个显示相应数据的模态。

我想重复使用相同的模态模板，并显示来自单击编辑按钮的实体的数据。我使用 Angular2 和 ng-bootstrap ，它依赖于 Bootstrap 4 。

从ng-bootstrap modal docs开始，它伴随着plunkr，我能够创建自己的工作模态组件（简化布局）：

//editmodal.html

<template #content let-c="close" let-d="dismiss">
  //Modal html content
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Edit</button>

//dashboard.html

<template ngbModalContainer></template>
<edit-modal></edit-modal>

//editmodal.component.ts

@Component({
  selector: 'edit-modal',
  templateUrl: 'entity/assets/templates/editmodal.html'
})

export class EditModal {
  //exported class logic
}

从前一个引导程序版本来看，让我感到奇怪的主要事情是打开模态的按钮现在显示在模板本身内，封装它。这使得很难附加对它的引用，所以我可以弄清楚从类逻辑中显示什么。如何使用Angular2和ng-bootstrap实现此行为？

Answer 1

您可以使用NgbModal服务打开一个包含任何位置组件的模式窗口。

致电this.ngbModalService.open(NgbdModalContent)，其中NgbdModalContent是您要在模式中显示的组件。

将“组件”视为内容：

https://ng-bootstrap.github.io/#/components/modal

Answer 2

与Lev在他的回答中所写的类似，你可以使用NgbModal.open()方法并传递一个组件来填充模态的内容。

现在，您不仅仅需要一个组件。您还希望组件从API获取数据。您可以通过将NgbModalRef.componentInstance参数与OnInit接口相结合来实现此目的。

所以解决方案是这样的：

constructor(
  private modalService: NgbModal
) { }

openModal() {
  const modalRef = this.modalService.open(MyComponent)
  modalRef.componentInstance.mycomponent_id = 1;
}

您的组件如下所示：

export class PlayerComponent implements OnInit {
  @Input() mycomponent_id;
  myObject: MyObject;

  ngOnInit() {
    this.myService.getObject(mycomponent_id)
      .subscribe(value => this.myObject = value);
  }
  ...
}

所以基本上总结一下。您可以通过将所需组件作为内容传递来打开模态。然后从组件外部设置mycomponent_id值。在此之后，您的组件将运行ngOnInit()方法，该方法允许您使用mycomponent_id值通过您的服务从API获取正确的数据。

Angular2 ng-bootstrap：重用不同数据的模态模板

2 个答案: