2017-02-28 149 views
1

我具有基於自舉與三個主子元素模態對話框組分:標題,摘要頁腳ng-content:transclude容器元素的內容,而不是元素本身?

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

@Component({ 
    selector: 'modal', 
    template: `<div class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title"><ng-content select="header"></ng-content></h4> 
     </div> 
     <div class="modal-body"> 
     <ng-content select="summary"></ng-content> 
     </div> 
     <div class="modal-footer"> 
     <ng-content select="footer"></ng-content> 
     </div> 
    </div> 
    </div> 
</div>` 
}) 
export class ModalComponent { 
} 

的目的是簡化引導樣板:

<modal> 
    <header>Hello world!</header> 
    <summary>A message</summary> 
    <footer>Dialog footer</footer> 
</modal> 

不幸的是,包含元素(標題,摘要頁腳)也包含在違反Bootstrap格式的「transclusion」中。我只能跨越容器節點的內容嗎?

+0

我喜歡這樣 –

回答

2

如何將標記換行以覆蓋<ng-container>元素並使用另一種類型的選擇器從<ng-content>(屬性選擇器,CSS類選擇器...)中獲取它?

<ng-container>應該對現有佈局/ CSS的干擾較小。

從消費者的角度來看:

<modal> 
    <ng-container header>Hello world!</ng-container> 
    <ng-container class="summary">A message</ng-container> 
</modal> 

裏面的模態分量的模板:

<!-- Attribute selector --> 
<ng-content select="[header]"></ng-content> 

<!-- CSS class selector --> 
<ng-content select=".summary"></ng-content> 
+0

這是不行的,因爲NG-容器是一個虛擬的元素 - 你以下例外: DOMException:無法在'Node'上執行'appendChild':此節點類型不支持此方法 – pFrenchie