Question

我仍然很有角度。我已经通过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

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

所以打开你的app.component.css文件并在那里写下所有的CSS代码来设置app.component.html的样式。

如果你正在使用styles: []定义['样式在这里''之间的所有样式。

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

<强>更新

如果您正在执行此过程但仍无法正常工作。然后重启虚拟服务器。有关此内容的更多信息："Port 4200 is already in use" when running the ng serve command

Answer 4

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

造型角度组件

4 个答案: