Установка класса во внутреннем элементе компонента, а не в самом селекторе

Question

Я хотел бы добавить класс в компонент углового компонента (v6), используя HostBinding.Пока у меня есть следующий фрагмент кода:

@Component({
  selector: 'app-boat',
  templateUrl: './boat.component.html',
  styleUrls: ['./boat.component.scss']
})

export class BoatComponent {
    @HostBinding('class.dragging') dragging = false;

    @HostListener('pointerdown', ['$event'])
    onPointerdown(event: PointerEvent): void {
        this.dragging = true;
    }   
}

boat.component.html

<div class="boat" >
  <ng-container *ngTemplateOutlet="boatpieces"></ng-container>  
</div>

В этом примере он добавит класс к самому компоненту app-boatследующим образом:

<app-boat class="dragging"></app-boat>

но моя цель состоит в том, чтобы внедрить класс «перетаскивания» в <div class="boat dragging" >.Это возможно?

Answer 1

Почему бы не использовать [ngClass] или [class.draggable] в вашем шаблоне компонентов лодок:

<div class="boat" [class.dragging]="dragging">
  <ng-container *ngTemplateOutlet="boatpieces"></ng-container>  
</div>

Вот вам образец StackBlitz для вашей ссылки.

Answer 2

Один из способов сделать это - привязка ввода.Вы можете определить входное свойство boatClass в дочернем компоненте:

export class BoatComponent {

  @Input() boatClass: string;

  ...
}

и применить его к элементу div в шаблоне с помощью [ngClass]:

<div class="boat" [ngClass]="boatClass">
  <ng-container *ngTemplateOutlet="boatpieces"></ng-container>  
</div>

Inродительский компонент, вы устанавливаете для класса соответствующее значение:

<app-boat boatClass="dragging"></app-boat>
<app-boat [boatClass]="'dragging'"></app-boat>
<app-boat [boatClass]="getBoatClass()"></app-boat>

См. этот стековый блик для демонстрации.