javascript - Angular 2.x bind class on body tag

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

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

Share Improve this question edited Apr 21, 2017 at 13:55 user663031 asked Dec 23, 2015 at 7:26 Arūnas Smaliukas 3,3216 gold badges30 silver badges48 bronze badges

Have you tried just using "body" as selector of your application component? – Günter Zöchbauer Commented Dec 23, 2015 at 7:29
Thank you, just tried but without success. App still works but I think it only bootstraps inside body without body itself. If I change selector to html - it replaces my head and body with template of component.. – Arūnas Smaliukas Commented Dec 23, 2015 at 7:35

Add a comment |

1 Answer 1

Sorted by: Reset to default 21

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 @HostBinding and @HostListener: what do they do and what are they for?

You can always use plain JS to update the DOM if you don't depend on server side rendering or web workers.

Alternatively you can just use

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular 2.x bind class on body tag - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)