如何使用 Angular 更改背景颜色答案

【问题标题】：How to change background color using Angular如何使用 Angular 更改背景颜色
【发布时间】：2019-03-21 07:03:40
【问题描述】：

我正在尝试更改我的主页组件页面的背景颜色。

这里是component.ts

import { Component } from '@angular/core'
import { ApiService } from '../_services/api.service'
import { Observable} from 'rxjs'

//import { Istock } from '../_models/istock'
import { Cagr } from '../_models/cagr'

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html'
})
export class HomeComponent {

  public buySellData$: Observable<Cagr[]>
  stock: Cagr[];
  gotStocks: boolean;
  gotStocks$: Observable<boolean>;

  constructor(private api: ApiService){
  }

  exit() {
    window.location.reload();
  }
  getStock() {
   this.buySellData$ = this.api.getBuySellData();
    this.buySellData$.subscribe(
         // Use the `data` variable to produce output for the user
         data => {
           this.stock = data;
           this.gotStocks = true;
           }

       )}
}

这是 HTML 文件：

<div class="bg">    
    <div style="text-align:center">
            <h1>goop.dev</h1>
    </div>    
</div>

这是css文件：

.bg { background-color:#a9c5f2; }

这是stackblitz

我有另一个具有相同代码但显示蓝色背景的组件文件 auth.component.ts

<div class="bg">    
<div style="text-align:center">
  <h1>goop.dev</h1>
</div>    
<amplify-authenticator [signUpConfig]="signUpConfig" ></amplify-authenticator>

和 auth.component.css

.bg { background-color:#a9c5f2; }

【问题讨论】：

您的问题到底是什么？你想动态改变颜色吗？它应该基于什么条件？
另外，您可以将您的组件代码添加到问题中吗？这可能与您尝试做的任何事情有关。
@JohnMontgomery 我只想要一个静态的浅蓝色背景色。我添加了 ts

标签： angular

【解决方案1】：

问题是您没有将 CSS 导入组件。只需将您的组件装饰器更改为：

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})

它应该可以工作。

另外，我刚刚查看了您的 stackblitz，您将文件命名为 home.component.cs。如果该错字出现在您的实际项目中，请确保也进行更正。

【讨论】：