Angular 2.x 在 body 标签上绑定类答案

【问题标题】：Angular 2.x bind class on body tagAngular 2.x 在 body 标签上绑定类
【发布时间】：2016-03-29 14:13:24
【问题描述】：

由于 Angular 2.x 是在 body 内部引导的，我如何在 body 标记上添加 [class.fixed]="isFixed"（在我的应用程序之外）？

<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;
    }
}

【问题讨论】：

您是否尝试过仅使用"body" 作为应用程序组件的选择器？
谢谢，刚试了没成功。应用程序仍然有效，但我认为它只在 body 内部引导，而没有 body 本身。如果我将选择器更改为html - 它会用组件模板替换我的头部和身体..

标签： javascript angular

【解决方案1】：

使用<body> 作为应用组件可以正常工作，但您不能在<body> 标记上使用绑定，因为它会尝试将“isFixed”绑定到父级并且没有父级。

改用@HostBinding

@Component(
  selector: 'body',
  templateUrl: 'app_element.html'
)
class AppElement {
  @HostBinding('class.fixed') 
  bool isFixed = true;
}

这是 Dart 代码，但翻译成 TS 应该不难。

另见@HostBinding and @HostListener: what do they do and what are they for?

如果你不依赖服务器端渲染或网络工作者，你总是可以使用纯 JS 来更新 DOM。

或者你也可以使用

document.body.classList.add('foo');

【讨论】：

我认为这可能是一个解决方案，但我无法制作使用 HostBinding 的最简单示例。你有任何示例的链接吗？..来自 angular.io/docs 的示例不适用于我..
我只使用 Dart，我试过了，它对我有用。您能否根据您的示例创建一个 Plunker，然后我们尝试找出它为什么不起作用？
我让 HostBinding 工作了，但这次我不会使用它。在某些情况下，我只会在 body 上添加类。但我无法选择角度为 2 的元素（或者我不知道如何选择）。 @Günter Zöchbauer 你能看看这个问题吗stackoverflow.com/questions/34432980/… 谢谢
很高兴听到您成功了。我认为另一个问题在 Dart 中完全不同，因此我无法帮助您。
@StepanSuvorov 感谢您的提示。新文档链接中不再有示例：-/ 我添加了指向另一个答案的链接，该答案有更多解释。