设置角度组件的样式

Question

我对 Angular 还是很陌生。我通过 cli 创建了一个名为 header 的组件。我已经为我想要使用的导航栏添加了 html。我也有一些我想添加的CSS。我把它放在 scss 文件中，但它似乎不起作用。 这是我的 CSS：

html,
body,
header,
.view {
    height: 100%;
}
/* Navigation*/

.navbar {
    background-color: transparent;
}

.top-nav-collapse {
    background-color: #4285F4;
}
@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #4285F4;
    }
}
/*Intro*/
.view {
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(54).jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是我的html：

<navbar SideClass="navbar navbar-toggleable-md navbar-dark introZindex fixed-top">
    <logo>
        <a class="logo navbar-brand">Navbar</a>
    </logo>
    <links>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
                <a class="nav-link"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link"><i class="fa fa-instagram"></i></a>
            </li>
        </ul>
    </links>
</navbar>
<!-- Main -->
<div class="view hm-black-strong">
    <div class="full-bg-img flex-center">
        <div class="container">
            <div class="white-text text-center wow fadeInUp">
                <h2>This Navbar is fixed and transparent</h2>
                <br>
                <h5>It will always stay visible on the top, even when you scroll down</h5>
                <br>
                <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
            </div>
        </div>
    </div>
</div>
<!-- /.Main -->
<main class="text-center py-5 mt-3">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</main>

这里是 ts 文件：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这是我的 app.module.ts 文件：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free';
import { MDBBootstrapModulePro } from './typescripts/angular-bootstrap-md/pro';
import { AgmCoreModule } from '@agm/core';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModulePro.forRoot(),
    // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
    // AgmCoreModule.forRoot({
    //   apiKey: 'google_maps_api_key'
    // })
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

任何人都可以就我在这里做错了什么给我建议吗？我的 app.component.html 中唯一的就是上面提到的组件的标签。

Answer 1

您没有为导航栏添加颜色，这是您看不到样式的唯一原因。如果您将bg-primary 类（或任何其他您喜欢的颜色）添加到您的SideClass 就足够了。

Answer 2

更新

只需在您的 html 模板上查看 navbar 标记即可。您是否（在模块中）声明并导入它？

---

我把它放在scss 文件中

我猜你没有配置样式扩展。

请检查angular-cli.json并添加这些行

"defaults": {
    "styleExt": "scss"
}

或者运行命令

ng set defaults.styleExt scss

那么请确保您将正确的位置链接到您的样式文件。

Answer 3

好的，我与 MDBootstrap 人员取得了联系，发现 html 文件的导航栏上缺少一个帮助程序类。一旦我添加了 bg-primary，它就起作用了。所以它看起来像这样：<navbar SideClass="navbar navbar-toggleable-md navbar-dark introZindex fixed-top bg-primary">

Answer 4

在您的app.component.ts 文件中确保@Component({}) 包含StylesUrls[] 或Styles[]。如果您使用 Cli 创建了 App.component，那么将会有 StylesUrls['app.component.css']。

因此，打开您的 app.component.css 文件并在其中编写所有 CSS 代码来设置您的 app.component.html 的样式。

如果您使用styles: []，请定义 ['styling go here'] 之间的所有样式。

因为你有很多样式，所以使用 styleUrls['directory/filename.css']。

更新：

如果您按照此程序进行操作但仍无法正常工作。然后重新启动您的虚拟服务器。更多信息请点击此处："Port 4200 is already in use" when running the ng serve command