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并导出到同一模块中。

您可以查看此stackblitz

ng-template

1 个答案: