Подтвердить что ты не робот

Как проверить, существует ли ng-контент

Предположим, что у меня есть простой компонент панели 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>

нет содержимого.

Ответ 1

Если у вас есть родительский элемент <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();
}

Ответ 2

Вам нужно будет удалить все ваши пробелы, но вы можете сделать это с помощью CSS, если вы действительно об этом позаботились (ng-контент не занимает места):

.panel-heading:empty { display: none }

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