Question

我有一个主题的Angular2应用程序。我将主题css和js复制到assets文件夹并将它们包含在index.html中。它们现在应用于应用程序中的每个网页。我还有API在线文档，它有自己的（静态 - 由脚本生成）html页面，有自己的css和自己的js。整体主题css和文档css不能很好地结合在一起，不能同时包含在index.html中。如何在不引入主站点主题css和js的情况下链接到我的静态文档html页面？

在收到相同的回复之后，我应该提到我确实关注过styleUrls并且它没有帮助。这意味着对于我拥有模板的每个组件，我应该包含相同的styleUrls，除了文档组件，我应该在styleUrls中包含另一个css。我不想这样做，因为它成了维护的噩梦。另外，我有几个关于主题的CSS，所以它使得在几十个文件中复制该语句变得更加困难（将来有数百个）。

Answer 1

<%= link_to "LOGOUT", logout_path, method: :delete %>

Answer 2

如果静态文档html页面是仅显示视图的组件，则可以使用@Component标头中的styleUrl属性将封装的CSS应用于该组件的视图。

@Component{
...
...
styleUrls: ['./path/to/style.css']
}
export class StaticApiDocumentation{ ... }

Answer 3

如果您有外部样式表，则可以使用@Component装饰器中的 styleUrls 属性将其包含在您的应用程序组件中

 styleUrls: ['src/app.component.css'],

如果您想使用内联样式，那么您可以在@Component装饰器中使用样式

styles: ['h1 { color: blue; }']

您也可以将它们组合起来以达到预期的效果，如下所示

@Component({
  selector: 'my-app',
  styleUrls: ['src/app.component.css'],
  template: `
    <div>
    <h1> this is H1 tag</h1>
      <h2>Hello {{name}}</h2>
    </div>
  `,
   styles: ['h1 { color: blue; }']

});

<强> LIVE DEMO

注意：在您的情况下，由于您使用的是模板，因此必须在AppComponent的模板中包含样式表，以便所有组件都可以使用它，因为AppComponent将是所有人的父母。或者，您可以使用

直接包含css参考

<link href="path_for_Stylesheets" rel="" />

进入index.html，这是包含样式表的常用方法。

为应用程序的一个Angular2页面单独的css

3 个答案: