Question

我的AngularJS 2应用程序有几个样式文件，我与gulp任务连接。这一切都很好，因为它们最终会出现在我发送给浏览器的大文件中。我的问题是关于Angular 2 @Component及其styleUrls属性。

@Component({
    selector: 'hero',
    templateUrl: 'hero/hero.template.html',
    styleUrls: ['hero/hero.component.css'],

    inputs: ['hero']
})

感谢默认模式（模拟）中的阴影DOM仿真，hero/hero.component.css中定义的样式仅应用于我想要的组件。我的问题是，串联会发生什么？我无法捆绑多个styleUrls中指定的所有CSS文件，因为我们要破坏封装的目的：组件的样式会泄漏到整个文档。但是，我不想为组件需要的每个CSS文件进行生产调用。我如何连接这些样式（并可能缩小它们），以便客户端在一次调用中获取所有样式，并仍然保留封装？

Answer 1

可以使用系统js插件将模板和css文件捆绑在js文件中。

import { Component } from '@angular/core';

import html from './hero/hero.template.html!text';
import css from './hero/hero.component.css!text';

@Component({
    selector: 'hero',
    template: html,
    styles: [css],
})
export class HeroComponent implements {
}

AngularJS 2 styleUrls：连接是什么？

1 个答案: