将基础组件的样式应用到从它继承的所有组件

Question

所以我在 Angular 中构建了一个通用按钮组件：

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-general-button',
  templateUrl: './general-button.component.html',
  styleUrls: ['./general-button.component.scss']
})
export class GeneralButtonComponent  {

  @Input() public buttonTitle: string;
  @Input() public disabledButton = false;
  @Input() public fullWidth = false;
  @Input() public tooltipMessage: string;
  @Output() public buttonClick =  new EventEmitter();

  constructor() {

  }

  public buttonClicked(): void {
    this.buttonClick.emit();
  }

}

我还有一个从该组件延伸出来的取消按钮：

import { Component } from '@angular/core';
import { GeneralButtonComponent } from '../general-button/general-button.component';

@Component({
  selector: 'app-cancel-button',
  templateUrl: '../general-button/general-button.component.html',
  styleUrls: ['./cancel-button.component.scss']
})
export class CancelButtonComponent extends GeneralButtonComponent {

  constructor() {
    super();
  }

}

在我的全局样式中，我设置了通用按钮组件的样式，当我将鼠标悬停在它所在的行上时，它会隐藏并可见：

nb-accordion app-general-button,
table app-general-button {
  visibility: hidden;
}

nb-accordion nb-accordion-item:hover app-general-button,
table tr:hover app-general-button {
  visibility: visible;
}

但是，这种样式似乎不适用于取消按钮组件。有没有办法告诉 Angular 将样式从基础组件应用到从它扩展的所有组件？

Answer 1

您可能必须在子组件中添加父组件的 CSS 文件以及 styleUrls。或者必须将 ViewEncapsulation 设为 none（通常不建议这样做）