我有一个像这样的组件
import {Component, OnInit} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'details',
templateUrl: 'details.component.html',
styleUrls: ["./details.component.scss"],
})
export class DetailsComponent {
constructor(
private modalService: NgbModal
) {
}
open(content) {
this.modalService.open(content).result.then((result) => {
console.log("closed");
}, (reason) => {
console.log("dismissed");
});
}
}
html 是,请注意最顶部的 popover 组件
<popover></popover>
<div class="row">
<div class="col">
<table class="table">
<thead>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>
<button (click)="open(popover)"> open </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
open组件只是一个展示html的组件
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'popover',
templateUrl: 'popover.component.html',
styleUrls: ["./popover.component.scss"],
})
export class PopOverComponent {
constructor(
) {
}
}
和 popover 组件的 html
<ng-template #popover let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</ng-template>
我的问题是当我将 ng-template 包裹在测试中时,h1 测试元素不会在 dom 中呈现。更明确地说,ng-template 不渲染,这是我需要将#popover 传递给 open 函数以打开弹出框的内容。
当我删除 ng-template 时,我可以看到 h1 测试。我需要 ng-template 在 dom 中呈现,并且我将 i 放入一个组件中,因为 popover 组件中有很多 html。
知道为什么会这样吗?