Angular2 ng-bootstrap:重复使用具有不同数据的模式模板 [英] Angular2 ng-bootstrap: Reuse modal template with different data

问题描述

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

I am building a dashboard-like interface with a set of entities containing comparable data. Each of these entities have an edit-button which I would like to use to open a modal with the respective data displayed.

我想重用相同的模态模板，并显示单击了编辑按钮的实体的数据.我在 ng-bootstrap 中使用了 Angular2 ，它依赖于 Bootstrap 4 .

I would like to reuse the same modal template, and display the data from the entity who's edit-button was clicked. I am using Angular2 with ng-bootstrap, which relies on Bootstrap 4.

来自 ng-bootstrap模式文档，并随附了 plunkr ，我能够创建自己的作品像这样的模态组件(简化了布局):

From the ng-bootstrap modal docs, and it's accompanying plunkr, I was able to create my own working modal component like so (simplified for layout):

//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实现此行为?

The main thing which struck me as odd, coming from the previous bootstrap version, is that the button to open the modal is now displayed within the template itself, encapsulating it. This makes it hard to attach a reference to it so I could figure out what to show from the class logic. How can I achieve this behaviour with Angular2 and ng-bootstrap?

推荐答案

类似于Lev在他的回答中所写，您可以使用NgbModal.open()方法并将其传递给组件以填充模态的内容.

Similar to what Lev wrote in his answer, you can use the NgbModal.open() method and pass it a component to populate the content of a modal.

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

Now, you don't just want a component. You also want the component to fetch the data from an API. You can do this by combining the NgbModalRef.componentInstance parameter, with the OnInit interface.

所以解决方案是这样的:

So the solution would be something like this:

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提取正确的数据.

So basically to summarize it. You open the modal by passing it the component you want as content. Then you set the mycomponent_id value from outside your component. After this your component will run the ngOnInit() method which allow you to use the mycomponent_id value to fetch the correct data from your API using your service.

这篇关于Angular2 ng-bootstrap:重复使用具有不同数据的模式模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！