Question

我有组件，仅在app.component.html中使用。此页脚存在于所有页面上。我想在组件上更改其背景颜色。页脚样式在footer.component.css中。那我该怎么办呢？

Answer 1

在footer.component.css上，您具有原始颜色。

如果您在app.component上使用页脚（组件名称：my-footer），如下所示：

<my-footer></my-footer>

您可以在app.component.css上添加一些CSS来覆盖原始颜色

my-footer ... {
    background-color: red
}

Answer 2

您需要对Angular说页面已更改，并在此更改发生时进行更改。一种方法是订阅router.event。因此，假设您有一个像这样的app.component

<div class="container">
    <a routerLinkActive="active" 
       routerLink="/one">One</a> |

    <a routerLinkActive="active" 
       routerLink="/two">Two</a> | 

    <a routerLinkActive="active" 
      routerLink="/three">three</a> 

    <router-outlet></router-outlet>
    <footer [style.background-color]="color"></footer>
  </div>

在您可以订阅的组件的ngOnInit中，所以

ngOnInit()
  {
    this.router.events.pipe(filter(event=>event instanceof NavigationEnd)).subscribe((res:any)=>{
      switch (res.url)
      {
         case "/one":
            this.color="orange"
            break;
         case "/two":
            this.color="pink"
            break;
         case "/three":
            this.color="silver"
            break;
      }
    })
  }

您可以在stackblitz

中查看示例

注意：在这种情况下，请使用[style.background-color]，也可以使用[ngClass]并更改订阅以提供其他类

已更新，如果您不希望将figth包含在路径中，则始终可以创建服务

export class BkService {
  private colorSubject=new Subject<any>()
  colorObservable=this.colorSubject.asObservable();
  constructor() { }
  setColor(color:any)
  {
    this.colorSubject.next(color);
  }
}

然后您可以订阅app.component的ngOnInit

this.bkService.colorObservable.subscribe(res=>{
  this.borderColor=res;
})

在ngOnInit中，每个组件都可以执行，例如

constructor(private bkService:BkService){}
  ngOnInit()
  {
    this.bkService.setColor('red');
  }

已编辑2 使用服务，您也可以使用一个简单的变量

在app.component中

  get fontSize()
  {
    return this.bkService.fontSize;
  }

在每个组件中

this.bkService.fontSize=".5rem"

如何在不同位置更改组件的样式？

2 个答案: