angular2 组件 styleUrls 无法正常工作答案

【问题标题】：angular2 component styleUrls not working correctlyangular2 组件 styleUrls 无法正常工作
【发布时间】：2017-09-10 03:11:54
【问题描述】：

我有一个 angular2 组件：

@Component({
    providers: [
        FlowsheetService,
        SubscriptionService
    ],
    moduleId: module.id,
    selector: 'flowsheet',
    templateUrl: './flowsheet.component.html',
    styleUrls: ['./lastRow.css']
})

与组件文件同目录的lastRow.css包含：

.yellow {
    background-color: yellow;
}

在我的第三方控件中，有一个 API 需要一个 css 类名作为返回值。

那个函数如下：

function className() {
    return 'yellow';
}

在我的 3rd 方控件中，我没有看到任何地方以黄色显示。

我的编码是否正确？

【问题讨论】：

至少对我来说，不清楚程序的结构是什么，第三方控件和api的含义是什么，以及className()在哪里使用以及用于什么。你能放一个 jsfiddle/plunker/codepen 吗？
我正在使用开源网格控件。我使用其自定义 API 控制/配置它。它的一个 API 函数，要自定义行颜色，需要接收一个类名。它是一个 CSS 类名。我希望这会有所帮助。 Plunker 不适合，因为它需要网格源等...
如果确实没有加载css文件，您可以在浏览器开发工具中检查。如果是，您可以使用元素检查器检查自定义网格组件的行中放置了哪些类，以及它是否适合您期望的类。了解这些问题的答案有助于了解正在发生的事情。

标签： css angular

【解决方案1】：

这个语法：

styleUrls: ['./lastRow.css']

仅为与此组件关联的模板定义样式。您在组件中定义的功能是什么？如果不是，则无法以这种方式定义样式。您需要为应用定义样式。

这里的 Angular 文档：https://angular.io/docs/ts/latest/guide/component-styles.html 介绍了如何为应用程序定义样式。

【讨论】：

我在组件类中定义的函数是的，但它被传递给第三方控件以用作输入参数。所以它应该工作。没有？