ng-template 中的条件模板槽

Question

有没有办法在 angular 模板中有条件地显示插槽？我想嵌入内容（如果有），否则显示默认内容。

假设有一个 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 和导出。

你可以看看这个stackblitz

ng-template 中的条件模板槽

Conditional template slot in ng-template

templates

angular-template

angular