web-dev-qa-db-fra.com

Comment vérifier si le contenu ng existe

Supposons que j'ai un composant de panneau simple Bootstrap avec plusieurs emplacements de transclusion. Exemple de modèle:

<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>

Je veux rendre l'en-tête du panneau facultatif. Comment cacher <div class="panel-heading"> élément, si aucun contenu n'est fourni pour <ng-content select="my-panel-heading"></ng-content>

angulartransclusion
22
hendrix

Si vous avez un élément parent de <ng-content> avec une variable de modèle (#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>

alors vous pouvez l'interroger comme

@ViewChild('panelHeading') panelHeading;

et définir une propriété selon qu'il y a des enfants ou non

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

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

Si <my-panel-heading> est un composant Angular2, vous pouvez également utiliser

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

ngAfterViewInit() {
  this.showHeading = this.panelHeading != null;
  this.cdRef.detectChanges();
}
19
Günter Zöchbauer

Vous devriez supprimer tous vos espaces mais vous pouvez le faire avec CSS si vous vous en souciez vraiment (ng-content ne prend pas d'espace):

.panel-heading:empty { display: none }

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