Question

玩弄NgbModal，

我有一个ngbmodal组件：我的目标是使用templateUrl作为内容，而不是在模板中定义内容（经过注释），如下面的代码所示。

信息-modal.ts

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

@Component({
    selector: 'info-modal-content',
    templateUrl: './info.modal.content.html'
    /* 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, {{person.FirstName}}!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
  </div>` */


})
export class InfoModalContent {
    @Input() person:Person

    constructor(public activeModal: NgbActiveModal) {}
}


@Component({
    selector: 'info-modal',
    templateUrl: './info.modal.html'
})
export class InfoModal {
    constructor(private activeModal:NgbModal) {}

    open(person:Person) {
        const modalRef = this.activeModal.open(InfoModalContent)
        modalRef.componentInstance.person = person;
    }
}

info.modal.content.html

<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, {{person.FirstName}}!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
      </div>`

询问的原因是，当我尝试这样做时，页面无法正确呈现。（它打开了我最初来自弹出窗口的页面。）

每当我取消注释模板（并注释templateUrl）时，它都能正常工作。

我错过了什么吗？

由于

Answer 1

我自己发现了这个问题：

templateUrl：＆＃39; ./ info.modal.content.html＆＃39;

应该是：

templateUrl：＆＃39;％copmplete path％/ info.modal.content.html＆＃39;

感谢您的帮助，

使用模板URL的Ngbmodal内容

1 个答案: