Angular 如何使用“角度”更改背景色

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

这是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;
           }

       )}
}  

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

这是一个

我有另一个组件文件，它具有相同的代码，但显示蓝色背景auth.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;
           }

       )}
}  

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

---

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

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

它应该会起作用

---

另外，我刚刚查看了stackblitz，您调用了文件

home.component.cs

。如果您的实际项目中存在这种错误，请确保也纠正它。

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

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