角2纳克模板在DOM不渲染器内部的元件

Question

我有一个像这样

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是一个组件，注意酥料饼的部件只是一个组件来显示HTML

import {Component, OnInit} from '@angular/core'; 

@Component({ 
    selector: 'popover', 
    templateUrl: 'popover.component.html', 
    styleUrls: ["./popover.component.scss"], 
}) 
export class PopOverComponent { 

    constructor(
    ) { 
    } 

} 

和用于酥料饼成分的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模板环绕测试，h1测试元素不在dom中呈现。更明确地说，ng-template不会渲染我需要将#popover传递给open函数来打开popover的东西。

当我删除ng模板时，我可以看到h1测试。我需要ng-template在dom中呈现，并且我将组件放入组件中，因为popover组件中有很多html。

任何想法，为什么这是表现这种方式？

Answer 1

使用<ng-container>代替

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