angular - 将 flex 规则应用于多个 Angular 4 组件的通用解决方案

Question

我的应用程序中有多个选项卡和子选项卡，每个选项卡和子选项卡都是一个组件。它们需要随着可用空间的增大或缩小而增大和缩小。

实现灵活布局的一个关键步骤是在我的应用级 CSS 文件中为主应用的所有子组件设置以下主要 CSS 规则:

/* app-level.component.css */
:host ::ng-deep tab1,
:host ::ng-deep tab2,
:host ::ng-deep tab1-subtab1,
:host ::ng-deep tab1-subtab2 {
{
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
}

哪里tab1 , tab2 , tab1-subtab1 , tab1-subtab2是选择器，例如对于标签 1:

/* tab1.component.ts */
@Component({
  selector: 'tab1',
  templateUrl: './tab1.component.html',
  styleUrls: ['./tab1.component.css']
})

上面只是举个例子。考虑一个有 10 个选项卡和许多子选项卡的应用程序。在那种情况下，第一个问题是我必须手动记下 app-level.component.css 中所有这些选项卡的选择器。

另一个问题是，在不久的将来，一些新开发人员可能会引入一个新选项卡，但他/她的选项卡内容不会像预期的那样增长或缩小，因为他/她甚至不知道他们必须将组件的选择器添加到应用程序中-级别组件.css。

是否有更通用和推荐的方法来解决 Angular 4 的这个问题:

1. 我不必用那些 selectors 污染 app.component.css
2. 每个 future 的标签都会自动应用已经应用的样式。

我想 Decorators 可能是解决这个问题的正确方法，至少可以解决 #1。对于 #2，似乎新选项卡的开发人员至少必须将该装饰器应用于他的组件，因此他/她将不得不做一些工作，但这并不像弄清楚将所需规则添加到app-component.css。我应该研究哪种装饰器？

注意:tab1、tab2、tab1-subtab1、tab1-subtab2 不是类。它们是由 Angular Router 生成的组件。

Answer 1

一种方法是使用属性选择器 [attr=value] ，其中有一些表达式，因此可以定位，即以某个单词开头或包含一个单词的类。

[attr^=value]

表示一个属性名为 attr 的元素，其值以值作为前缀(前面)。

[attr*=value] 

表示具有属性名称 attr 的元素，其值在字符串中至少包含一次值。

可以这样使用

:host ::ng-deep [class^='tab']          /*  start with 'tab'  */
{
  display: flex;
  flex-flow: column nowrap;
}

:host ::ng-deep [class*='-subtab']      /*  contain '-subtab'  */
{
  flex: 1 1 auto;
  flex-flow: row nowrap;
}

---

属性选择器也可以与您所谓的装饰器一起使用，即

:host ::ng-deep [flexcontainer]   /*  has the attribute `flexcontainer`  */
{
  display: flex;
  flex-flow: column nowrap;
}

:host ::ng-deep [flexitem]        /*  has the attribute `flexitem`  */
{
  flex: 1 1 auto;
}