Question

我将Angular 2与SystemJS一起使用并尝试将样式表添加到组件中由于我现在使用的是SystemJS I can't use relative path，所以我使用了组件模板URL的绝对路径以及样式网址。
但是内联样式工作正常（即styles: ['h1 {font-size: 12px; }']）

该组件看起来像这样：

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

样式表dashboard.css永远不会被加载（也不会返回任何错误）。

工具的版本：

〜angular 2: 2.0.0-beta.6
〜systemjs: 0.19.20
〜typescript: 1.8.0

Answer 1

你只需要从styleUrls路径的开头删除斜杠：

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css']
})

Answer 2

Angular 2文档说相对名称需要SystemJS exposes __moduleName variable，就像CommonJS的module.id一样......你试过吗？

d1 <- read.table(text=ave(unlist(d[-1]), rep(d$Name, 2), 
      FUN = function(x) paste(unique(x), collapse=" "))[1:nrow(d)], 
      header=FALSE, fill=TRUE, col.names= paste0("ID", 1:3))
cbind(d, d1)
#  Name No1 No2 ID1 ID2 ID3
#1  Jon   1   1   1   2   3
#2  Jon   2   1   1   2   3
#3  Jon   3   1   1   2   3
#4  Kel   1   2   1   2  NA
#5  Kel   1   2   1   2  NA
#6  Kel   1   2   1   2  NA
#7  Don   3   3   3  NA  NA
#8  Don   3   3   3  NA  NA
#9  Don   3   3   3  NA  NA

Answer 3

如果您在项目中使用PrimeNG或Angular Material，styleUrl将无法像这样工作。您需要导入ViewEncapsulation并将封装：ViewEncapsulation.None放在@component定义中。

import { Component, Output, Input, ViewEncapsulation} from '@angular/core';

@Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'message-center',
   templateUrl: './messagecenter.component.html',
   styleUrls: ['./messagecenter.component.css']
})

Answer 4

我在Heroes教程中遇到了同样的问题。 moduleId解决了这个问题：

@Component({
  moduleId: module.id, // this is the key
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css']
})

没有moduleId只有内联样式和模板工作。

Answer 5

我尝试在plunker示例中实现styleUrls：它对我有用。

我使用了以下内容：

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app-root.style.css']
})

检查文件app.component.ts和app-root.style.css

https://plnkr.co/edit/z6tl8o0b8cJ6zGofKfmF?p=preview

Answer 6

只要index.html位于app上方的文件夹中，样式网址就会正常显示。

同样在html标记中，需要将类设置为样式中的所需内容。

Answer 7

为此你不需要删除任何尾部斜杠或任何东西，实际上我也犯了这个错误，并且html页面没有链接到css文件。

其实我犯的是愚蠢的错误： html页面为：

<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">

css文件为：

login-logo-width {
   width: 260px;
}

我得到的错误是： 此检查会检测未知的CSS选择器，并提供将其声明为类或ID的功能

所以你要做的就是：将参数定义为id或类，无论你在html文件中声明了什么：

.login-logo-width {
    width: 260px;
}

Answer 8

来自 @boskicthebrain 的解决方案中 moduleId 的当前文件的相对路径对我有用。

但是因为我在 webpack ，所以这种情况下的css文件必须加载 raw-loader （而不是style-loader / css-loader）组合，因为样式加载器不适用于服务器端AOT）并且让角度做它的工作。

最后，由于::ng-deep运算符已弃用且样式的范围限制非常严格，因此我将其全部转储并使用简单的导入import './my-component.component.css';进行处理。 .component.ts 文件的顶部。这样做的好处是可以加载组件，同时也是全局 CSS。

styleUrls在Angular 2中不起作用

工具的版本：

8 个答案: