css - angular2-meteor styleUrl 不加载

Question

我有这个不加载样式的组件。不过模板加载正确。

// client/imports/navbar/navbar.ts
import {Component} from "@angular/core";
@Component({
    selector: 'navbar',
    templateUrl: 'client/imports/navbar/navbar.html',
    styleUrls: ['client/imports/navbar/navbar.css']
})
export class Navbar {}

到目前为止我已经尝试过:

• 在 /client/index.html 中设置 base href
• 在 Bootstrap 中的基础组件 /client/app.ts 注入(inject) base href
• 加载样式:

styleUrls: [
'/client/imports/navbar/navbar.css',
'客户端/导入/​​导航栏/navbar.css'，
'导入/导航栏/navbar.css'，
'./navbar.css',
'导航栏.css'
]

但是，根文件夹中的组件加载样式时没有任何问题:

// client/app.ts
import {Component} from "@angular/core";
@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    styleUrls: ['app.css']
})
export class AppComponent{}

我已经知道了:

• Angular 样式不支持相对路径
• 路径不应以斜杠开头 /
• 路径应该指向根，因为我使用 SystemJs (Meteor)。

但我还是试过了。

更新:

我发现让它成为摩尔的唯一方法是在同一个模板 html 文件中声明样式，如下所示:

 <style>
   .my-class{
       ...
   }
 </style>
 <div class="my-class">
      ...
 </div>

Answer 1

目前的问题似乎是，所有 *.css 文件都由构建合并在一起，然后通过 http://localhost:3000/merged-stylesheets 加载.css?hash=something，因此您将获得具有此名称的全局样式，而不是 Angular 的组件本地样式。

考虑我的以下示例:

@Component({
    templateUrl: 'client/home.component.html',
    styleUrls: [ 'client/home.component.css' ]
})
export class HomeComponent extends MeteorComponent {

我确实在 client/home.component.css 看到了对 CSS 的额外网络请求，但不幸的是，如果您查看内容，它会被视为“路由”请求并返回整个页面，而不是 CSS 的内容。

编辑:似乎已经有一个问题针对此提出:https://github.com/Urigo/angular2-meteor/issues/270

解决方法:

由于使用 styleUrls 按需加载 CSS，因此需要稍后可用。因此，您可以将其放在 public/ 中 meteor 元素的文件夹。在我的示例中，css 需要位于 public/client/home.component.css。