2015-12-23 10 views
13

bodyの内側にangle 2.xがブートストラップされているので、[class.fixed]="isFixed"をbodyタグ(my-app外)に追加するにはどうすればよいですか?bodyタグのangle 2.xバインドクラス

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

マイアプリのコンポーネントは、アプリケーションのコンポーネントが正常に動作しますが、それは `バインドしようとするので、あなたが<body>タグにバインドを使用することはできませんよう<body>を使用

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

を使用することができますあなたは自分のアプリケーションコンポーネントのセレクタとして ''「体」を使用してみましたか? –

+0

ありがとう、ちょうど試しましたが、成功しませんでした。アプリケーションはまだ動作しますが、 'body'自体の中に' body'の中でのみブートストラップすると思います。セレクタを 'html'に変更すると、頭と体がコンポーネントのテンプレートで置き換えられます。 –

答えて

19

のように見える「IsFixedへ」親にし、親はありません。

使用@HostBinding代わり

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

これは、ダーツのコードですが、TSにそれを翻訳するのは難しいことではないはずです。

は、サーバー側のレンダリングやウェブ労働者に依存しない場合は、常にDOMを更新するために、プレーンJSを使用することができますも@HostBinding and @HostListener: what do they do and what are they for?

を参照してください。

はまた、あなただけの

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

私はそれが解決策になるかもしれないと思っていますが、私はHostBindingを使っても簡単な例を作ることはできません。 .. angular.io/docsの例は私にとってはうまくいきません。 –

+0

私はDartでしか動作しませんでした。あなたの例からPlunkerを作成できますか?それが機能していない理由を理解しようとしますか? –

+0

ありがとう、私はそれを動作させると思う;) –

関連する問題