Question

任务是根据路线更改背景颜色。我必须为UpcomingComponent显示不同的颜色，而对于其他路线，背景颜色将保持不变。

我正在尝试为/ background / .classname中的STYLES设置值为background-color动态。

以下是代码

@Component({
  selector: 'app-upcoming',
  templateUrl: './upcoming.component.html',
  // styleUrls: ['./upcoming.component.css'],

  styles: [`
  /deep/ .root {
    background-color: color;
  }`]
})

export class UpcomingComponent implements OnInit {

  color: string;


  ngOnInit() {
    this.bodyBackgroundImage();
  }



  bodyBackgroundImage() {
    if (window.location.pathname === '/upcoming'){
      console.log("Here i am");
      this.color =  'purple';
    }

  }

}

Answer 1

不支持styles或styleUrls中的绑定。在您要设置样式的元素上使用[class.xxx]="..."，[ngClass]="..."，[style.xxx]="..."，[ngStyle]="..."种绑定。

Answer 2

我在AppComponent中使用了Route。感谢@GünterZöchbauer帮助我。

import { Component } from '@angular/core';
import {Router , ActivatedRoute,NavigationEnd} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {


  constructorprivate router:Router,private activatedRoute:ActivatedRoute) {

    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
         if (event.url === '/upcoming') {
          document.body.style.background = 'grey';
      }else {
          document.body.style.background  = 'blue';
      }
      }
    });
  }
}

从组件Angular 2中设置样式的值

2 个答案: