css - 为什么在 angular2 样式中有一组字符串而不是只有一个字符串？

Question

我正在尝试学习 Angular2，但我对组件样式有点困惑，在组件装饰器中我们可以指定样式以将它们应用到我们的组件，有两种方法可以做到这一点:

1- 我们可以在 styleUrls 属性中指定 css 文件，这是一个字符串数组，这对我来说是逻辑，因为我们可能有多个 css 文件

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styleUrls: ['style1.css', 'style2.css']
})

2- 我们可以在 styles 属性中编写我们的样式，它也是一个字符串数组，这就是我感到困惑的地方!我的意思是为什么 styles 属性是一个字符串数组？为什么它不只是一个字符串!

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styles: [
        `
            .glyphicon{
                cursor: pointer;
            }
        `
    ]
})

在 Angular2 的官方文档中，他们没有说明为什么他们在那里放置一组字符串而不是一个字符串!谁能给我解释一下!!

Answer 1

styles 数组中提供的所有 CSS 字符串将组合应用于组件。乍一看，这可能听起来毫无用处，但如果您想混合多种并非全部硬编码到您的组件的样式，它会派上用场。例如:

import commonStyles from "./commonStyles";

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styles: [
        ".glyphicon { cursor: pointer; }",
        commonStyles.background // This string of style rules gets applied too!
    ]
})

编辑:回答评论中的问题:

commonStyles 在这种情况下只是一个包含 CSS 字符串的普通 JavaScript 对象:

export default {
    background: "div { background-color: #00FF00; }"
};

以这种方式做事的一个优点是您的应用程序不必发出额外的 HTTP 请求来获取 styleUrls(也就是说，我对 Angular 2 还不够熟悉，所以说这是否会带来明显的不同)。