2

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

// 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 {}

到目前为止，我已经尝试过：

  • 设置base href在/client/index.html
  • 在引导程序中注入base hrefat 基础组件/client/app.ts
  • 加载样式：

styleUrls: [ '/client/imports/navbar/navbar.css', 'client/imports/navbar/navbar.css', 'imports/navbar/navbar.css', './navbar.css', 'navbar.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)。

但无论如何我都试过了。

更新：

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

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

1 回答 1

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 {

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

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

解决方法：

由于 usingstyleUrls按需加载 CSS，它需要稍后可用。因此，您可以将其放在public/流星项目的文件夹中。在我的示例中，css 需要位于public/client/home.component.css.

于 2016-05-20T14:26:05.023 回答