html - Angular 2 全局样式 - 只加载一个 css 文件

Question

我在 Angular 2 中遇到加载样式问题。我只在 index.html 中加载样式 (css) 一次，但是当我将页面拆分为组件时，一切都出错了。我注意到，当我只创建一个包含整个 html 代码的组件时，一切都很好。

有必要拆分css代码吗？我不想那样做。

我在这里放了一些文件，希望能理解我的问题。

感谢您的帮助。

我将 html 页面拆分为组件时的页面

仪表板.html

<div class="body_wrap_t t">
    <div class="main_wrap r">
        <div class="main_wrap_row c">
            <div class="main_wrap_inner_container t">
                <div class="main_wrap_inner_container_row r">

                    <sidebar-wrap></sidebar-wrap>

                    <right-wrap></right-wrap>

                </div><!-- r --><!-- END main_wrap_inner_container_row -->
            </div><!-- t --><!-- END main_wrap_inner_container -->
        </div><!-- c --><!-- END main_wrap_row -->
    </div><!-- r --><!-- END main_wrap -->
    <footer-wrap></footer-wrap>
</div><!-- t --><!-- END body_wrap -->

right-wrap.component.ts(例如)

import { Component } from '@angular/core';

@Component({
  selector: 'right-wrap',
  templateUrl: 'src/app/pages/dashboard/right-wrap/right-wrap.html',
  // styles: [ './content.css' ],
})
export class RightwrapComponent {

}

dashboard.component.ts 我的基本页面组件在哪里

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Router } from '@angular/router';

@Component({
  selector: 'dashboard',
  templateUrl: 'src/app/pages/dashboard/dashboard.html',
})
export class DashboardComponent {

}

Answer 1

如果您只想使用一个文件，请将其加载到元素的 index.html 中。不要在组件中加载任何其他 css 文件。

但我总是建议您将 css 拆分为多个文件。当您在几周、几个月或几年后查看它时，它会更清晰。 =)您还可以更快地知道自己的错误在哪里或必须在何处进行更改。