Question

使用angular2应用程序并希望能够为公共内容和管理内容加载不同的样式。然而，Angular似乎忽略了从外部源加载的样式

@Component({styleUrls:["http://url_to_external_styles"]})

上面的代码没有按预期工作，是否需要使用完整URL从外部源加载样式的任何其他配置？加载相对于组件的样式100％，但是对从内容服务器加载更感兴趣。

Answer 1

您需要禁用组件的视图封装：

@Component({
    styleUrls:["http://url_to_external_styles"],
    encapsulation: ViewEncapsulation.None
})

https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation

Answer 2

对于那些收到“找不到模块：错误：无法解决”./the-url-of-an-external-style-sheet'形式错误的人，这里有什么对我有用：

以下是关于styleUrls数组中url的Angular documentation所说的内容：

URL相对于应用程序根目录，通常是托管应用程序的index.html网页的位置。

为了加载样式表，创建一个本地css样式表并在其顶部添加@import语句。例如，如果要在“http://url_to_external_styles”处添加样式表，则可以创建src / app / my-component.component.css文件。然后你可以添加以下作为src / app / my-component.component.css的第一行：

@import "http://url_to_external_styles";

您可以按照上面引用的Angular文档中的链接找到有关@import的更多信息。

Angular2 styleUrls不加载外部样式

2 个答案: