web-dev-qa-db-ja.com

ng-contentが存在するかどうかを確認する方法

単純なBootstrapパネルコンポーネントに複数のトランスクルージョンスロットがあるとします。テンプレートの例：

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

パネル見出しをオプションにしたい。 <div class="panel-heading">にコンテンツが提供されていない場合、<ng-content select="my-panel-heading"></ng-content>要素を非表示にする方法

angulartransclusion
22
hendrix

テンプレート変数（<ng-content>）を持つ#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>

それからあなたはそれのようにそれを照会することができます

@ViewChild('panelHeading') panelHeading;

子供がいるかどうかに応じてプロパティを設定します

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

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

<my-panel-heading>がAngular2コンポーネントの場合、次のように使用することもできます

@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

すべてのスペースを削除する必要がありますが、本当に気にかけている場合はCSSでこれを行うことができます（ng-contentはスペースを占有しません）。

.panel-heading:empty { display: none }

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