Klasa powiązania Angular 2.x na etykiecie korpusu

Od Angulara 2.x jest bootstrapped wewnątrz ciała, jak dodać [class.fixed]="isFixed" na tag ciała (poza my-app)?Klasa powiązania Angular 2.x na etykiecie korpusu

<html> 
<head> 
</head> 
<body [class.fixed]="isFixed"> 
    <my-app>Loading...</my-app> 
</body> 
</html>

Moja aplikacja komponent wygląda

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

Źródło

2015-12-23 Arūnas Smaliukas

Czy próbowałeś tylko przy użyciu '' „ciało” jako selektor swojego komponentu aplikacji? –

Dziękuję, po prostu próbowałem, ale bez powodzenia. Aplikacja nadal działa, ale myślę, że to tylko bootstraps wewnątrz 'body' bez' body' samego. Jeśli zmienię selektor na 'html' - zastępuje on moją głowę i ciało szablonem komponentu .. –

Korzystanie <body> jako składnik aplikacja działa poprawnie, ale nie można używać wiążące znacznikiem <body> ponieważ próbuje związać `„isFixed”do rodzica i nie ma rodzica.

Zastosowanie @HostBinding zamiast

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

Jest to kod Dart ale to nie powinno być trudne do przetłumaczenia go do TS.

Zobacz także @HostBinding and @HostListener: what do they do and what are they for?

Zawsze można używać zwykłego JS zaktualizować DOM jeśli nie zależą renderowania po stronie serwera WWW lub pracowników.

Alternatywnie można po prostu użyć

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

Źródło

2015-12-23 07:49:10

Myślę, że może to być rozwiązanie, ale nie mogę zrobić nawet najprostszego przykładu pracy z HostBinding ... czy masz link do dowolnego przykładu? .. Przykład z angular.io/docs nie działa dla mnie .. –

Pracuję tylko z Dart i próbowałem go i zadziałało dla mnie. Czy potrafisz stworzyć Plunkera ze swojego przykładu i próbujemy dowiedzieć się, dlaczego to nie działa? –

Dzięki, myślę, że sprawię, że zadziała;) –

Klasa powiązania Angular 2.x na etykiecie korpusu

Odpowiedz

Powiązane problemy