Angular 2.x связать класс с тегом body

Так как 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;
    }
}

Ответы

Ответ 1

Использование <body> в качестве компонента приложения работает нормально, но вы не можете использовать привязку в теге <body>, потому что он пытается связать ` "isFixed" с родителем и родительский объект отсутствует.

Используйте @HostBinding вместо

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

Это код Дарта, но его сложно перевести в TS.

См. также @HostBinding и @HostListener: что они делают и для чего они нужны?

Вы всегда можете использовать простой JS для обновления DOM, если вы не зависите от рендеринга на стороне сервера или веб-работников.

В качестве альтернативы вы можете просто использовать

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