如何将2向绑定变量分配给angular2中的body标签

Question

我想在 body 标签中声明一个双向绑定变量，即要声明的变量名称是 "menuToggle"（请参考 plunker 中的 index.html）。

我想在 App.component 中添加一些按钮，这些按钮将被点击并切换 body 标记中声明的变量中的 class。此 app.component 来自 AppModule loaded/bootstrapped。

我面临的问题是 "body" 标签，它位于加载应用程序的 "my-app" 选择器之外。在这种情况下，我如何在应用程序边界之外分配一些值 "body" 标记。

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

请找到 plunker 我尝试实现此功能的地方，但我无法为 body 标记中的变量赋值。

有什么想法可以实现这个或任何可用的解决方法吗？

Answer 1

这是不可能的，因为 <body> 在已初始化的应用程序之外，正如已经提到的那样。

类应该手动添加到 <body>。 setElementClass method from Renderer abstraction can be used instead of jQuery or addClass/removeClass methods, 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 比 EventEmitter 更受欢迎，因为前者接受初始值（false），因此可以在构造函数中跳过初始化。

如果在其他任何地方使用切换，则必须将其移动到共享服务。

更合适且可能更简单的方法是将 CSS 规则设计为不依赖可更改的 body 类。应用程序本身可以从 my-app 移动到 body 选择器以解决其他布局问题。

如何将2向绑定变量分配给angular2中的body标签

How to assign a 2-way binding variable to the body tag in angular2

angular2-directives

angular