在带有模板的Angular NG-bootstrap模式下，关闭和解散按钮不起作用

Question

我是Angular的新手，我正在通过构建学习。

我需要以不同的HTML内容编程打开模态。

我已经引用了本期所示的第一个stackblitz示例，并创建了一个模态component(使用Selector称为<app-modal>(，以便我可以在应用程序中的任何地方创建模态。

现在，我在页面中使用<ng-template>中使用具有不同HTML内容的组件。

模态在单击主页中的按钮时可以打开良好，但是模态中的关闭和关闭按钮不起作用。

我试图在这里进行最小示例：https：//stackblitz.com/edit/angular-j1u4fo

任何帮助将不胜感激。谢谢。

Answer 1

尝试此

我已经创建了模态的全局配置，其中let-c =" collect"和let-d =" dimply"

app.component.html

<div class="container-fluid">
<p>Welcome to {{ name }}</p>
<button type="button" (click)="openModal()">Click to open Modal</button>
<!-- Example 1: Passing TemplateRef as custom component -->
  <ng-template #modal1 let-c="close" let-d="dismiss">
    <app-modal [title]="'Title'" [c]="c" [d]="d">
      <img src="https://angular.io/assets/images/logos/angular/angular.png" height="100px" width="100px">
    </app-modal>
  </ng-template>
</div>

modal.component.html

<div class="modal-header">
    <h4 class="modal-title">{{title}}</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">
    <ng-content></ng-content>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Cancel</button>
</div>

modal.component.ts

import { Component, Input, OnInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  @Input() title = `Information`;
  @Input() c;
  @Input() d;
  constructor(
    public activeModal: NgbActiveModal
  ) {}
  ngOnInit() {
  }
}

Answer 2

在您的 openModal中替换 this.m1用 ModalComponent替换。

根据API文档，ngbactivemodal仅在通过组件而不是模板中时起作用。

如果将组件类型作为内容传递，则可以将这些组件的实例注入ngbactivemodal类的实例。然后，您可以使用ngbactivemodal方法从组件的"内部"关闭/解散模式。