Question

我有一个Angular组件，用于显示很多不同的东西。将其视为弹出窗口。

<my-component 
 [headLine]="data.headLine"
 [text]="data.text">
</my-component>

在某些情况下，还将包括一张图像。在这些情况下，“ my-component”具有可选的“ image”属性。如果使用图像，则“ my-component”具有一个输出事件，该事件将在加载图像时触发：

<my-component 
 [headLine]="data.headLine"
 [text]="data.text"
 [image]="data.img"
 (imageLoaded)="imageLoaded($event)">
</my-component>

由于我现在需要一个容器组件来初始化这两个“ my-component”实例，因此我有点被锁定来执行以下操作：

<ng-container *ngIf="data.img; else noImage">
  <my-component 
   [headLine]="data.headLine"
   [text]="data.text"
   [image]="data.img"
   (imageLoaded)="imageLoaded($event)">
  </my-component>
</ng-container>

<ng-template #noImage>
  <my-component 
   [headLine]="data.headLine"
   [text]="data.text">
  </my-component>
</ng-template>

我想知道是否有一种方法可以用更少的代码行来实现相同的目标？因此，仅当存在“ data.img”时，才应跟踪说“ imageLoaded”事件。

我想我的示例没有很好地描述这种情况-我无权修改“ imageLoaded”事件，因为这是来自外部库。

所以我想我正在寻找的场景是这样的：

<my-component 
  [headLine]="data.headLine"
  [text]="data.text"

** ngIf="data.img" **
  [image]="data.img"
  (imageLoaded)="imageLoaded($event)"
** end of ngIf **
>
</my-component>

据我所知，不可能在模板中添加这样的条件，但更多是我要寻找的。

Answer 1

您可以在模板语句（事件绑定）中使用三元运算符，以避免在没有图像时进行订阅：

<my-component 
  [headLine]="data.headLine"
  [text]="data.text"
  [image]="data.img"
  (imageLoaded)="data.img ? imageLoaded($event) : 0"
</my-component>

角组件初始化-有没有办法做条件属性？

1 个答案: