2ウェイバインディング変数をangle2のbodyタグに割り当てる方法

bodyタグに宣言された双方向バインディング変数、つまり宣言したい変数の名前を "menuToggle"にしたいとしました。プランナーのindex.html）。2ウェイバインディング変数をangle2のbodyタグに割り当てる方法

クリックしてbodyタグに宣言されている変数のクラスを切り替えるApp.componentにいくつかのボタンが必要でした。このapp.componentはAppModuleからロード/ブートストラップされています。

私が直面している問題は、アプリケーションがロードされている「my-app」セレクタの外側にある「body」タグです。この場合の "body"タグでは、アプリケーション境界外にいくつかの値を割り当てるにはどうすればよいですか。

<body [ngClass] = "{menuToggle: nav-md}"> 
    <my-app>Loading...</my-app> 
    </body>

私はこれを実装しようとしたplunkerを見つけることが、私はbodyタグ内の変数に値を代入することはできませんしていてください。

これを実現する方法や回避策はありますか？

出典

2016-10-04 Krishnan

<body>は既に説明したように、初期化されたアプリの外にあるため、不可能です。

クラスは<body>に手動で追加する必要があります。 setElementClass method from Renderer abstraction代わりにjQueryのまたはaddClass/removeClass方法、like thatを用いることができる。

menuToggle$ = new BehaviorSubject(false); 

constructor(private renderer: Renderer) { 
    this.menuToggle$.subscribe((visible) => { 
     this.renderer.setElementClass(document.body, "nav-md", !visible); 
     this.renderer.setElementClass(document.body, "nav-sm", visible); 
    }); 

    ... 
} 

MenuToggle() { 
    this.isMenuVisible = !this.isMenuVisible; 

    this.menuToggle$.next(this.isMenuVisible); 
}

RxJS BehaviorSubject前者が初期値（false）を受け入れるためEventEmitter上ここで好まれているので、初期化は、コンストラクタにスキップすることができます。

トグルが他の場所で使用されている場合は、それを共有サービスに移動する必要があります。

より適切で簡単な方法は、変更可能なbodyクラスに依存しないようにCSSルールを設計することです。アプリケーション自体はmy-appからbodyセレクタに移動して他のレイアウトの問題をカバーすることができます。

出典

2016-10-04 04:23:16 estus

2ウェイバインディング変数をangle2のbodyタグに割り当てる方法

答えて

関連する問題