Инициализация углового компонента - есть ли способ сделать условные свойства?

Question

У меня есть угловой компонент, который используется для отображения множества разных вещей. Думайте об этом как о всплывающем окне.

<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>

Мне было интересно, есть ли способ добиться того же, с меньшим количеством строк кода? Поэтому что-то вроде того, чтобы сказать, что событие «imageLoaded» следует отслеживать, только если присутствует «data.img».

Полагаю, мой пример не очень хорошо описывал сценарий - у меня нет доступа к изменению события "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>