angular2笔记：修改样式

文章意在记录自己在学习angular2中的一些收获，请带着质疑的眼光去看文章。由于本人也是学习阶段，语言难免会不严谨，若有说的不对的地方，欢迎指出~~~

目的

想修改".html"文件(一个component最基本的文件.ts+.html+.css)中的button标签的背景颜色。

实现

".html"中的<button #greet>测试</button>修改button的样式，比如修改background-color为blue。

上述button标签中的#greet是为了给后面用的，代码如下：

import {ElementRef,AfterViewInit,ViewChild,Renderer} from '@angular/core';
...
 @ViewChild('greet')//ViewChild是Angular 2 内置的属性装饰器
  greetDiv:ElementRef;

  
  constructor(private elementRef:ElementRef,private renderer:Renderer) { }
  ngAfterViewInit() {//元素创建完成以后执行下面代码，更多请看angular2的生命周期钩子
        // this.greetDiv.nativeElement.style.background = 'green';
        this.renderer.setElementStyle(this.greetDiv.nativeElement,'background-color','blue');
  }
  ngOnInit() {
  }

这个是renderer.setElementStyle的用法，第二个参数是background-color就是添加style的背景颜色。

还可以给模板添加class，比如：

this.renderer.setElementClass(this.greetDiv.nativeElement,'aaa',true);

这就添加完class了。相当于在<button #greet>测试</button>中添加class='aaa'，这样就可以在.css中使用.aaa{}添加各种样式了；

更多renderer 的API，看这里。

注意：

上述方法我试了一下，貌似只在纯html标签中有效，如果是angular2的自定义标签组件，貌似不起作用，像这样：

<div >
    <app-back-home  #greet></app-back-home>
</div>

是没有效果的，需要修改此处组件的样式，应该是通过传参的方式，这里就先不说了。