Wie überprüft man, ob ng-content vorhanden ist

Angenommen, ich habe eine einfache Bootstrap-Panel-Komponente mit mehreren Einfangslots. Vorlagenbeispiel:Wie überprüft man, ob ng-content vorhanden ist

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <ng-content select="my-panel-heading"></ng-content> 
    </div> 
    <div class="panel-body"> 
    <ng-content select="my-panel-content"></ng-content> 
    </div> 
</div>

Ich möchte Panel-Überschrift optional machen. Wie kann ich <div class="panel-heading"> Element verstecken, wenn es keinen Inhalt für <ng-content select="my-panel-heading"></ng-content>

Quelle

2016-08-01 hendrix

'ngIf' sollte gegenüber' [hidden] 'bevorzugt werden. Gibt es einen Grund, warum Sie "versteckt" bevorzugen? –

@ GünterZöchbauer Wenn die Variable showHeading auf false initialisiert wird, wird das Element zu dem Zeitpunkt, zu dem ngAfterContentInit aufgerufen wird, aus der Vorlage entfernt. Der Verweis auf viewChild ist nicht definiert. Wenn ngIf bevorzugt ist, könnten Sie den Standardwert für showHeading in true ändern und es sollte funktionieren. – hendrix

Eigentlich habe ich es gerade getestet und es funktionierte nicht gut mit * ngIf, auch nachdem der Standardwert auf true geändert wurde. Der Verweis auf #panelHeading war immer noch undefiniert, weil * ngIfd es entfernt hat. – hendrix

ist gegeben, wenn Sie ein übergeordnetes Element von <ng-content> mit einem Template-Variable haben (#panelHeading)

<div class="panel panel-default"> 
    <div class="panel-heading" #panelHeading [hidden]="!showHeading"> 
    <ng-content select="my-panel-heading"></ng-content> 
    </div> 
    <div class="panel-body"> 
    <ng-content select="my-panel-content"></ng-content> 
    </div> 
</div>

dann können Sie es abfragen wie

@ViewChild('panelHeading') panelHeading;

und legen Sie eine Eigenschaft abhängig davon, ob Kinder vorhanden sind oder nicht

constructor(private cdRef:ChangeDetectorRef) {} 

showHeading:boolean = false; 

ngAfterViewInit() { 
    this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0; 
    this.cdRef.detectChanges(); 
}

Wenn <my-panel-heading> eine Angular2 Komponente, dann auch

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading; 

constructor(private cdRef:ChangeDetectorRef) {} 

showHeading:boolean = false; 

ngAfterViewInit() { 
    this.showHeading = this.panelHeading != null; 
    this.cdRef.detectChanges(); 
}

Quelle

2016-08-01 07:16:43

Wenn Sie den Standardwert showHeading auf 'false' setzen, ist this.panelHeading 'undefined'. Wenn der Standardwert showHeading auf 'true' gesetzt wird, funktioniert er korrekt, aber ich erhalte 'ExpressionChangedAfterItHasBeenCheckedError' in der Konsole. Außerdem muss ich 'ngAfterViewInit' statt 'ngAfterContentInit' verwenden, ansonsten ist showHeading immer undefiniert. Irgendwelche Ideen, wie man löst? Thx –

@Luca, danke für die Rückmeldung. Ich habe meine Antwort aktualisiert. Ich denke jetzt ist 'ngAfterViewInit' korrekt. Ich habe ein paar weitere Dinge aktualisiert, die auf die von Ihnen erwähnten Probleme eingehen sollten. –

danke! Für meine Lösung bevorzuge ich die Verwendung von '* ngIf' anstelle von' hidden', indem ich den 'showHeading' Standardwert auf true setze. Jetzt funktioniert alles richtig :) –

verwenden Sie können Sie müssten alle Räume entfernen, aber man könnte dies mit CSS tun, wenn Sie wirklich darüber gepflegt (ng-Gehalt doesn‘ t Platz einnehmen):

.panel-heading:empty { display: none } 

<div class="panel-heading"><ng-content select="my-panel-heading"></ng-content></div>

Quelle

2017-09-29 21:17:54

Wie überprüft man, ob ng-content vorhanden ist

Antwort

Verwandte Themen