angular 2包含所有页面通用的css文件答案

【问题标题】：angular 2 include css file common to all pagesangular 2包含所有页面通用的css文件
【发布时间】：2023-03-31 22:35:01
【问题描述】：

我知道在 Angular 2

中包含组件的内部样式和外部样式

import {Component} from 'angular2/core';

@Component({
    selector: 'test',
    templateUrl:'app/test.component.html',
        styleUrls:['app/test.component.css']
})
export class AppComponent {
    carparts = [
    {
        "id": 1,
        "name": "Super Tires",
        "description": "These tires are the very best",
        "inStock": 5
    },
    {
        "id": 2,
        "name": "Reinforced Shocks",
        "description": "Shocks made from kryptonite",
        "inStock": 0
    }];

    totalCarParts(){
        let sum = 0;
        for (let carPart of this.carparts) {
            sum += carPart.inStock;
        }
        return sum;
    }
}

我想包含一些可以在我的整个应用程序中使用的通用 css，比如普通的 html。

是否有任何角度特定的方法或者这是正确的方法？？

【问题讨论】：

把它放在index.html 我想说.. :)
在右角没有具体的方法......

标签： html css angular

【解决方案1】：

index.html:

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles/sheet.css"/>
</head>
...

【讨论】：

这是合法的实现方式吗？
这对每个 HTML 框架都是合法的，即使没有框架也是如此。如果您在 Angular 中添加样式表，它只是将该文件的内容放在标题中，因此没有实际区别，除了这种情况无处不在。

【解决方案2】：

或者，标准 Angular 项目文件集中有一个 src/styles.css 文件。如果您将样式添加到其中，它们将自动内嵌到您的 index.html 中。

【讨论】：