Настройка модальности ng-boostrap с компонентом в качестве контента

Question

Я пытался настроить модал с компонентом, передаваемым как контент. Тем не менее, я не могу заставить его работать. Он просто отображал фон, а сам модал не отображается. Посмотрите этот раздвоенный код stackblitz для более подробной информации.

В основном мне просто нужно настроить ширину модальной зоны. В руководстве он передал ссылку на шаблон содержимого, как описано в этом разделе . Но в моем случае я передаю не TemplateRef, а Component.

Answer 1

Удалите оболочку <ng-template let-modal> (и ее закрывающую половину) из шаблона NgbdModalContent.

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