由于 Angular 2.x 是在主体内部引导的，我该如何添加[class.fixed]="isFixed"在 body 标签上（在我的应用程序之外）？
<html>
<head>
</head>
<body [class.fixed]="isFixed">
<my-app>Loading...</my-app>
</body>
</html>
我的应用程序组件看起来像
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>因为应用程序组件工作正常，但您不能在<body>标记，因为它尝试将“isFixed”绑定到父级，但没有父级。
Use @HostBinding instead
@Component(
selector: 'body',
templateUrl: 'app_element.html'
)
class AppElement {
@HostBinding('class.fixed')
bool isFixed = true;
}
这是 Dart 代码，但将其转换为 TS 应该不难。
也可以看看@HostBinding 和 @HostListener：它们的作用是什么以及它们的用途是什么？ https://stackoverflow.com/questions/37965647/hostbinding-and-hostlistening-what-do-they-do-and-what-are-they-for
如果您不依赖服务器端渲染或 Web Worker，则始终可以使用纯 JS 来更新 DOM。
或者你也可以使用
document.body.classList.add('foo');
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
