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

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

在base href

/client/index.html

在引导程序

base href

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

我已经知道：

角度样式不支持相对路径
路径不应以斜杠/
路径应该响应root，因为我使用SystemJs（Meteor）。

但无论如何我都是三文鱼。

更新：

我发现使其成为moular的唯一方法是在同一模板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的额外网络请求，但不幸的是，如果您查看内容，则将其视为＆＃34;路由＆＃34;请求并返回整个页面，而不是CSS的内容。

编辑：似乎已经存在针对此问题：https://github.com/Urigo/angular2-meteor/issues/270

解决方法：

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

angular2-meteor styleUrl无法加载

1 个答案: