Angular 2 Global Style - 仅加载一个css文件

Question

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

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

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

感谢您的帮助。

我在分割组件中的html页面时的页面

dashboard.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分成多个文件。当你在几周，几个月或几年内看一下它时，它会更清晰。 =） 你也可以更快地知道你的错误在哪里或你必须做出改变的地方。