Question

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

我想在App.component中有一个按钮，它会被点击并在body标签中声明的变量中切换类。这个app.component是从AppModule加载/引导的。

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

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

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

任何想法如何实现这一点或任何可用的解决方法？

Answer 1

这是不可能的，因为<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而不是EventEmitter，因为前者接受初始值（false），因此可以在构造函数中跳过初始化。

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

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

如何在angular2

1 个答案: