Условный шаблон слота в ng-template

Question

Есть ли способ условно показать слоты в угловом шаблоне? Я хочу включить содержимое, если оно есть, и показать содержимое по умолчанию в противном случае.

Допустим, есть my-card компонент, с шаблоном, как это:

<my-card>
  <ng-content select="[card-body]"></ng-content>
  <div *ngIf="!card-body">Default text</div>
</my-card>

Тогда использование (скажем, в компоненте приложения) будет таким:

<!-- This will show the card body -->
<my-card><div card-body>This is card body</div></my-card>
<!-- This will show the default text -->
<my-card></my-card>

Если это не будет работать со слотами, каковы мои альтернативы?

Answer 1

Вы можете создать директиву с помощью селектора card-body,

@Directive({selector: '[card-body]'})
export class CardBodyDirective {
}

Затем в my-card компонент, используйте его следующим образом

@Component({
  selector: 'my-card',
  template: `
    <div class="card">
      <ng-content select="[card-body]"></ng-content>
      <div *ngIf="!cardBody">Default text</div>
    </div>
  `
})
export class MyCardComponent  {
  @ContentChild(CardBodyDirective) cardBody;

}

Не забудьте объявить CardBodyDirective и экспорт в тот же модуль.

Вы можете взглянуть на этот стек