4

我是 Angular 的新手,我对带有ng-Bootstrap 的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

感谢您的任何想法。

4

3 回答 3

4

有几个变化需要考虑。

第一步是在您的entryComponents部分注册您的模态app.module.ts

entryComponents: [
    AboutComponent,
],

接下来,将旧的 Modal 复制到新组件并删除以下 2 行:

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

之后,关于如何调用点击事件的逻辑有一个小改动:

这是新的 HTML 代码:

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

这是新的 TypeScript 事件:

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) { }

另一个重要的变化是关闭modal的逻辑,需要改成这样:

<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

您需要将旧的:更改(click)="d('Cross click')"(click)="activeModal.dismiss('Cross click')"

随着所有这些变化,它会像魅力一样发挥作用。我从这里得到了一些灵​​感:

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

于 2019-09-20T18:33:55.613 回答
0

我还没有尝试过,但你可以做的是你可以从孩子向父母发出一个事件。尝试在 Angular 文档中寻找事件发射器。

于 2019-09-20T05:48:36.137 回答
0
Instead of calling child component in parent view you sould try this.
// if want to pass any value to child (parameter @Input() value in child);
// get back response from child (result @Output() EventEmitter value in child)
openChildComponentModel() {
        const modalRef = this.modalService.open(
            AboutComponent,
            {backdrop: 'static'}
        );
        modalRef.componentInstance.parameter= 'Text';
        modalRef.componentInstance.result.subscribe((response) => {}
        });
    }
于 2019-09-20T06:09:44.350 回答