В Angular 2 проверить, является ли <ng-content> пустым?

Предположим, что у меня есть компонент:

@Component({
    selector: 'MyContainer',
    template: `
    <div class="container">
        <!-- some html skipped -->
        <ng-content></ng-content>
        <span *ngIf="????">Display this if ng-content is empty!</span>
        <!-- some html skipped -->
    </div>`
})
export class MyContainer {
}

Теперь я хотел бы отобразить некоторый контент по умолчанию, если <ng-content> для этого компонента пуст. Есть ли простой способ сделать это без прямого доступа к DOM?

Ответы

Ответ 1

Оберните ng-content в элемент HTML, например, div, чтобы получить локальную ссылку на него, затем привяжите выражение ngIf к ref.children.length == 0:

template: '<div #ref><ng-content></ng-content></div> 
           <span *ngIf="ref.nativeElement.childNodes.length == 0">
              Display this if ng-content is empty!
           </span>'

Ответ 2

В ответе @pixelbits не хватает некоторых. Нам нужно проверить не только свойство children, потому что любые разрывы строк или пробелы в родительском шаблоне приведут к тому, что элемент children будет содержать пустой текст \linebreaks. Лучше проверить .innerHTML и .trim() это.

Рабочий пример:

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

Ответ 3

При добавлении содержимого добавьте ссылочную переменную:

<div #content>Some Content</div>

и в своем классе компонентов получите ссылку на внедренный контент с помощью @ContentChild()

@ContentChild('content') content: ElementRef;

так что в шаблоне вашего компонента вы можете проверить, имеет ли значение переменная содержимого

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div>

Ответ 4

Вот решение CSS. Это может обеспечить компонент по умолчанию, если ни один не был установлен в ng-content. Поскольку в моем случае они братья и сестры, можно решить это следующим образом.

^{Which is compatible since IE 9 and partially since IE7/8: https://caniuse.com/#feat=css-sel3}

HTML

<div class="my-custom-component-content-wrapper">
    <ng-content select="my-custom-component"></ng-content>
</div>
<my-custom-component>
    This shows something default.
</my-custom-component>

CSS

.my-custom-component-content-wrapper:not(:empty) + my-custom-component {
    display: none;
}

Ответ 5

Вставить elementRef: ElementRef и проверить, есть ли у elementRef.nativeElement дети. Это может работать только с encapsulation: ViewEncapsulation.Native.

Оберните тег <ng-content> и проверьте, есть ли у него дочерние элементы. Это не работает с encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>
  <ng-content></ng-content>
</div>

и проверьте, есть ли у него какие-либо дочерние элементы

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(не проверено)

Ответ 6

В моем случае я должен скрыть родителя пустого ng-контента:

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

Простая работа CSS:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}