在body标签角2.X绑定类 [英] Angular 2.x bind class on body tag
问题描述
由于角2.x是身体如何添加里面的自举 [class.fixed] =IsFixed设定在body标签（我的应用外）<？ / p>
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; /头＆GT;
＆LT;车身[class.fixed] =IsFixed设定＆GT;
＆LT;我的应用＆GT;加载...＆LT; /我的应用＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我的应用程序组件看起来像
进口{}组件从angular2 /核心;
从进口{} CORE_DIRECTIVESangular2 /通用';
进口{RouteConfig，ROUTER_DIRECTIVES，路由器，位置}从'angular2 /路由器;
进口{}简介从./components/about/about';
进口{}测试从'./components/test/test';@零件（{
选择：我的应用，
供应商：[]，
templateUrl：/views/my-app.html'，
指令：[ROUTER_DIRECTIVES，CORE_DIRECTIVES]
管：[]
}）@RouteConfig（[
{路径：'/约，名称：关于，组成：约，useAsDefault：真正}，
{路径：'/测试'，名称：测试，部分：测试}
]）出口类的MyApp {
路由器：路由器;
位置：位置; 构造器（路由器：路由器，地点：位置）{
this.router =路由器;
this.location =位置;
}
}
使用＆LT;身体GT; 为应用程序组件工作正常，但你不能使用绑定的＆LT;车身方式＆gt; 标签，因为它试图绑定`IsFixed设定给家长，没有父
使用 @HostBinding 而不是
@Component（
选择：身体，
templateUrl：app_element.html
）
类AppElement {
@HostBinding（'class.fixed'）
布尔IsFixed设定= TRUE;
}
这是飞镖code，但它不应该是很难将其翻译为TS。
另请参见 https://angular.io/docs/ts/latest /api/core/HostBinding-var.html 一个例子。
Since Angular 2.x is bootstrapped inside a body how do I add [class.fixed]="isFixed" on body tag (outside my-app)?
<html>
<head>
</head>
<body [class.fixed]="isFixed">
<my-app>Loading...</my-app>
</body>
</html>
My app component looks like
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import {RouteConfig, ROUTER_DIRECTIVES, Router, Location} from 'angular2/router';
import {About} from './components/about/about';
import {Test} from './components/test/test';
@Component({
selector: 'my-app',
providers: [],
templateUrl: '/views/my-app.html',
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES],
pipes: []
})
@RouteConfig([
{path: '/about', name: 'About', component: About, useAsDefault: true},
{path: '/test', name: 'Test', component: Test}
])
export class MyApp {
router: Router;
location: Location;
constructor(router: Router, location: Location) {
this.router = router;
this.location = location;
}
}
Using <body> as app component works fine but you can't use binding on the <body> tag because it attempts to bind `"isFixed" to the parent and there is no parent.
Use @HostBinding instead
@Component(
selector: 'body',
templateUrl: 'app_element.html'
)
class AppElement {
@HostBinding('class.fixed')
bool isFixed = true;
}
This is Dart code but it shouldn't be hard to translate it to TS. See also https://angular.io/docs/ts/latest/api/core/HostBinding-var.html for an example.
这篇关于在body标签角2.X绑定类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
