Angular2 check/detect ng-content Auswahl existiert vom übergeordneten Knoten * ngIf Anweisung

Question

Meine Frage ist zu überprüfen, dass <some_selector> verbunden mit <ng-content select='some_selector'> gegeben wurde oder nicht in der übergeordneten Komponente. sein kann ich Beispiel geben für verdeutlichen:

Wir haben übergeordnete Komponente Vorlage (editor.html):

Hier ist mein Redakteur

<modal> 
    Some contents 
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot> 
</modal> 

Und in modaler Komponente Vorlage (modal.html) wir wollen so * ngIf Anweisung:

<div class="modal> 
    <div class="modal-body"> 
     <ng-content></ng-content> 
    </div> 
    <div class="modal-footer" *ngIf='hasNgContent("mfoot")' > 
     <ng-content select="mfoot"></ng-content> 
    </div> 
</div> 

Wir wollen nicht div.modal-Fußzeile zeigen, wenn <mfoot> Tag Nicken in Editor Vorlage verwendet wurde innerhalb <modal> ta G. Also, wie zu implementieren hasNgContent() Methode? oder kann in angular2 gibt es direktere *ngIf Anweisung, die erkennen, dass <mfoot> Tag wurde in Elternteil-Tag oder nicht verwendet.

Answer 1

Sie können dies mit @ContentChildren tun und die Länge der Sammlung sehen. Etwas wie:

@ContentChildren(mfootComponent) children: QueryList<mfootComponent>; 

dies mit allen mfootComponents bevölkern, so dass Sie überprüfen können, ob Sie welche haben. Ich hoffe, es hilft.

Answer 2

Die Lösung, die ich ein wenig schmutzig und verwenden jQuery gefunden, aber ich sehe keine andere Art und Weise in Frage Rahmen (so ohne Make-Tag <mfoot> als separate Komponente):

import { Component, ElementRef, AfterViewInit, ... } from '@angular/core'; 

declare var $: any; 

@Component({ 
    selector: 'modal', 
    templateUrl: './modal.html', 
}) 
export class Modal implements AfterViewInit { 

    modalEl = null; 

    constructor(private _rootNode: ElementRef) {} 

    ngAfterViewInit() { 
     this.modalEl = $(this._rootNode.nativeElement).find('div.modal'); 
    } 

    hasNgContent(selector:string) { 
     return $(this._rootNode.nativeElement).find(selector).length; 
    } 
}