条件模板插槽in-template

Question

有没有办法在角度模板中有条件地显示插槽？我希望转换内容（如果有的话），否则显示默认内容。

假设有一个my-card组件，其模板如下：

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

然后用法（例如，app组件）将是这样的：

<!-- 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并导出。

你可以看看这个stackblitz