Question

我想使用HostBinding将类添加到有角组件（v6）的组件中。到目前为止，我有以下代码：

@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

一种方法是使用输入绑定。您可以在子组件中定义boatClass输入属性：

export class BoatComponent {

  @Input() boatClass: string;

  ...
}

并使用div将其应用于模板中的[ngClass]元素：

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

在父组件中，将类设置为适当的值：

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

有关演示，请参见this stackblitz。

Answer 2

为什么在船形组件模板中不使用[ngClass]或[class.draggable]：

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

这是您推荐的Sample StackBlitz。

在组件的内部元素而不是选择器本身中设置类

2 个答案: