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不够熟悉，不知道是否这会产生切实的影响。）

Answer 2

例如，您可以使用共享样式文件

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

Answer 3

因此，如果数组项目超过两个，他们可以通过迭代来获取文件。

这是他们编程的方式，而不是使用'style1.css style2.css'

如果他们使用字符串。他们将添加一个功能。

分开刺痛。输出数组
迭代数组以获取文件。

他们使用数组来缩短流程并使应用程序更快。如果您正在使用angular2构建一个小型应用。它不会伤到你。但是如果你正在处理数百万的数据。它也可以帮助但不能太多。 ATLEAST。

问候。

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

3 个答案: