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是选择器，例如对于tab1：

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

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

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

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

我不必用所有selectors
每个将来的标签都会自动将样式应用于它。

我认为装饰器可能是解决这个问题的正确方法，以便至少解决＃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;
}

Answer 2

答案的描述中提到了两个主要限制因素：

app.component.css不应该被每个组件的选择器污染
每个将来的标签都会自动应用该样式。

以下应用级广义CSS规则同时处理两者。这些组件是由Angular Router生成的。我们找到router-outlet并将CSS应用于它的直接兄弟（通过使用相邻的兄弟组合子），它们是制表符和子标签的组件。

:host ::ng-deep router-outlet + * { 
   display: flex; 
   flex: 1 1 auto; 
   flex-flow: column nowrap 
}

新开发人员不必为他们的新标签/子标签做任何额外的事情。

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

2 个答案: