使用组件作为内容自定义 ng-bootstrap 模态

Question

我一直在尝试使用作为内容传递的组件来自定义模式。但是，我似乎无法让它发挥作用。它只是显示了一个背景，模态框本身没有显示。观看这个分叉的 stackblitz 代码了解更多细节。

基本上我只需要自定义模态框的宽度即可。在指南中，它通过了内容模板引用，如 section 中所述。但就我而言，我传递的不是 TemplateRef，而是一个组件。

Answer 1

从您的 NgbdModalContent 模板中删除 <ng-template let-modal> 包装纸（及其结束的一半）。

@Component({
  selector: 'ngbd-modal-content',
  template: `
      <div class="modal-header">
        <h4 class="modal-title">Hi there!</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Hello, {{name}}!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
      </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

使用组件作为内容自定义 ng-bootstrap 模态

Customizing a ng-boostrap modal with component as content

css

bootstrap-4

ng-bootstrap

angular