Question

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

这是组件。

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

Answer 1

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

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

它应该可以工作。

此外，我只是看了一下您的堆栈闪电，您将文件称为home.component.cs。如果您的实际项目中有打字错误，请确保也进行更正。

如何使用Angular更改背景颜色

1 个答案: