如何打开一个作为子组件的ng-Bootstrap-Modal?

Question

我是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

感谢您的任何想法。

Answer 1

有几个变化需要考虑。

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

entryComponents: [
AboutComponent,
],

接下来，将旧的模态复制到新组件并删除以下 2 行：

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

之后，click事件的逻辑在如何调用它方面有一个小的变化：

这是新的 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) { }

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

<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

Answer 2

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

Answer 3

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