如何通过一个打字稿类改变身体类(angular2) [英] How do I change the body class via a typescript class (angular2)

查看:152
本文介绍了如何通过一个打字稿类改变身体类(angular2)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要如何改变通过根组件体类?

@Component({
   选择应用程序,
   指令:[ROUTER_DIRECTIVES]
   模板:`
       <节类=头>
           < H1>应用< / H1>
           <路由器出口>< /路由器出口> `
})


解决方案

一种方法是使用使<身体GT; 通过使用标签的应用元素作为选择和使用主机绑定更新的应用元素类。

@Component({
   选择:身体,
   主持人:{'[class.someClass]':'someField'}
})
出口类AppElement实现AfterViewInit {
  someField:布尔= FALSE;
  //或者在`@ Component`主机参数
  // @HostBinding('class.someClass')someField:布尔= FALSE;  ngAfterViewInit(){
    someField = TRUE;身体GT;对`&LT //设置类``someClass`
  }
}

How do I change the body class via the root component?

@Component({ 
   selector: "app", 
   directives: [ROUTER_DIRECTIVES], 
   template: ` 
       <section class="header"> 
           <h1>App</h1>  
           <router-outlet></router-outlet> ` 
}) 

解决方案

One way is to use make the <body> tag the app element by using body as selector and use host-binding to update the app elements classes.

@Component({
   selector: 'body',
   host:     {'[class.someClass]':'someField'}
})
export class AppElement implements AfterViewInit {
  someField: bool = false;
  // alternatively to the host parameter in `@Component`
  // @HostBinding('class.someClass') someField: bool = false;

  ngAfterViewInit() {
    someField = true; // set class `someClass` on `<body>`
  }
}

这篇关于如何通过一个打字稿类改变身体类(angular2)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆