用于类绑定的角度自定义指令

问题描述

我的指令

import { Directive,HostBinding,Input } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

  @Input('highlight') isHighlighted = false;

  constructor() {}

  @HostBinding('class')
  get function () {
    return {
      'highlighted': this.isHighlighted,'bordered': this.isHighlighted
    }
  }
}

使用指令为：

<course-card (courseSelected)="onCourseSelected($event)"
             [course]="course"
             [highlight]="highlight">

哪里highlight is BOOLEAN

类在 DOM 中正确应用为： class="bordered highlighted"。

highlighted class 有效果，bordered class 没有效果

样式类定义为：

.highlighted{
    Box-shadow: 2px 2px 2px red;
}

.bordered {
    border-top: 5px solid lightgreen;
}

我不知道为什么会这样?

解决方法

默认情况下，Angular 组件会对所有组件进行 display:inline。由于样式不可见，屏幕更改课程组件显示类型为块

course.component.css

:host { display: block; }

Working Example