Angular 2 ng-template 未在组件内部的 dom 中呈现答案

【问题标题】：Angular 2 ng-template not rendering in dom inside componentAngular 2 ng-template 未在组件内部的 dom 中呈现
【发布时间】：2017-04-20 21:17:58
【问题描述】：

我有一个这样的组件

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>

打开的组件只是一个展示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">&times;</span>
        </button>
    </div>
    <div class="modal-body">
      <p>One fine body&hellip;</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。

知道为什么会这样吗？

【问题讨论】：

为什么需要ng-template？ ng-container 甚至使用简单的divs 怎么样？
我更新了 op 以表明我使用 let 作为属性指令并且仅适用于 ng-template。我知道我可以将这些函数作为输入传递给组件，但我宁愿简化
这不是在简化，而是在复杂化……看看 ng 风格指南。

标签： angular ng-template

【解决方案1】：

改用<ng-container>

https://angular.io/guide/structural-directives#!#ng-container

【讨论】：