angular - 如何让我的 Angular 6 组件继承其扩展组件的样式？

Question

我基本上想扩展一个组件并继承它的样式，但是 app-another组件没有继承 base-component.css .

base.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.css']
})
export class BaseComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

另一个.component.ts

import { Component } from '@angular/core';
import { BaseComponent } from './base/base.component';

@Component({
  selector: 'app-another',
  templateUrl: './another.component.html'
})
export class AnotherComponent extends BaseComponent {
  title = 'app';
}

我在做傻事吗？

或者这还不支持？

能够将它添加到 AnotherComponent 样式数组中会很酷:

styleUrls: BaseComponent.styleUrls.concat(["./another.component.css"])

这基本上是我想要实现的目标:

styleUrls: ['./base/base.component.css', "./another.component.scss"]

但由于 base 实际上位于另一个 Node 模块中它自己的 Angular 库中，因此无法像这样访问它。

希望这是有道理的。

Answer 1

我认为您应该考虑以更好的方式构建您的应用程序。我不明白您为什么要从另一个组件继承样式。每个组件都有自己的私有(private)样式，以避免全局样式和不继承。如果您愿意，您可以将这些特定样式提升到更高级别，例如将它们放在 styles.scss 中，以便可以在您的应用程序中共享它们。这是我的看法。

此外，您可以查看此链接 https://alligator.io/angular/styles-between-components-angular/您可以在其中看到可以为您工作的特殊伪元素。也许 parent > child 的方式来构建它。我从来没有做过这样的事情。但是在这里你有我对这个话题的想法。让我知道它是否有效。