Question

我是Angular的新手，对于使用 ng-Bootstrap 的 Modals ，我有一些疑问。我已经能够打开同一组件中的Modals，并且它们运行良好，例如：

链接：

<a (click)="openAbout(contentAbout)" class="nav-link">About</a>

点击事件：

  openAbout(contentAbout) {
    this.modalService.open(contentAbout, { centered: true, scrollable: true });
  }

模式：

<ng-template #contentAbout let-c="close" let-d="dismiss">
  <div class="modal-header">
      <h4 class="modal-title" id="modal-primary-title">About us</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
  </div>
  <div class="modal-body centered">
    <h2>Gravity Now!</h2>
    <p>It is a platform designed for Space Apps Challenge and the Challenge Gravity Map, Earth Watch category and was chosen in the Top 5 of The Most Inspiring Projects of 2014.</p>
    <a href="https://2014.spaceappschallenge.org/awards/#globalawards" target="_blank">
      <img id="spaceLogo" src="./assets/space_apps.png">
    </a>
    <br>
    <img id="supernovaLogo" src="./assets/supernova-logo.png">
    <p>Also, you can download our apps.</p>
    <div class="row">
      <div class="col">
        <a href="https://play.google.com/store/apps/details?id=tk.supernova.gnow" target="_blank">
          <img class="logo" src="./assets/android.png">
        </a>
      </div>
      <div class="col">
        <a href="https://www.microsoft.com/en-us/p/gravity-now/9nblgggzjlp5" target="_blank">
          <img class="logoWindows" src="./assets/windows.png">
        </a>
      </div>
    </div>
  </div>
</ng-template>

并且它起作用了，但是，我想将此模式移动到子组件上，因为我有4个模态，并且代码看起来有些混乱，但是如果我创建一个新的子组件，请将模式代码移动到子组件上，然后，将其添加到父组件中，如下所示：

<app-about></app-about>

什么都没有发生，因为单击不会打开任何东西。有人经历过类似的经历吗？您知道点击事件中应该更改什么吗？

我什至阅读了文档，但找不到与我的文档相关的示例：

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

感谢任何想法。

Answer 1

我还没有尝试过，但是您可以做的是可以将事件从子级发送到父级。尝试在Angular文档中查找事件发射器。

Answer 2

npm run watch

Answer 3

要考虑一些变化。

第一步是在entryComponents的{{1}}部分中注册您的模态：

app.module.ts

接下来，将您的旧Modal复制到您的新组件中，并删除以下两行：

entryComponents: [
    AboutComponent,
],

此后，点击事件在调用方式上的逻辑有了微小变化：

这是新的HTML代码：

<ng-template #contentAbout let-c="close" let-d="dismiss">
</ng-template>

这是新的TypeScript事件：

<a class="nav-link" (click)="openAbout()">About</a>

此外，在新组件中，您需要添加更改openAbout() { //Here you define the name of your component this.modalService.open(AboutComponent); //This section is if you want to have any variable to initialize //compConst.componentInstance.weight = undefined; }并添加constructor的实例。

NgbActiveModal

另一个重要的更改是关闭模式的逻辑，需要将其更改为：

constructor(public activeModal: NgbActiveModal) { }

您需要将旧的<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button>更改为(click)="d('Cross click')"

通过所有这些更改，它将像魅力一样工作。我从这里得到了一些启发：

https://stackblitz.com/edit/angular-uwtgs6

如何打开作为子组件的ng-Bootstrap-Modal？

3 个答案: