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

Question

我的指令

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{
    box-shadow: 2px 2px 2px red;
}

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

我不知道为什么会这样

Answer 1

默认情况下，Angular 组件对所有组件都有 display:inline 。由于样式对屏幕不可见，因此将课程组件显示类型更改为阻止

course.component.css

:host { display: block; }

工作示例