Ionic 2 如何知道要使用哪些样式

Question

在 ionic 2 中，组件定义如下

@Component({
    selector:'some-selector',
    templateUrl:'some-template.ts'
})

有相应的样式 sheet 但是它从未在 @Component 属性中定义。它如何使样式 sheet 在未定义的情况下仍然使用样式？

Answer 1

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

当您在 Component 中定义 selector 属性 时（在本例中为 page-home），您设置 html 元素的名称 将用于该组件。因此 Ionic 将创建一个 html 元素，其标签为 page-home 并将包含 home.html 文件的内容。

然后如果您转到 home.scss 文件，您会看到该文件以

开头

page-home {
    /* Style rules ... */
}

所以基本上通过这样做，这些样式规则将被限制在元素 page-home 和该标签内的元素。