Angular 2.x 在 body 标签上绑定类
Posted
技术标签:
【中文标题】Angular 2.x 在 body 标签上绑定类【英文标题】：Angular 2.x bind class on body tag 【发布时间】：2016-03-29 14:13:24 【问题描述】：由于 Angular 2.x 是在 body 内部引导的，我如何在 body 标记上添加 [class.fixed]="isFixed"（在我的应用程序之外）？
<html>
<head>
</head>
<body [class.fixed]="isFixed">
<my-app>Loading...</my-app>
</body>
</html>
我的应用组件看起来像
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;
【问题讨论】：
您是否尝试过仅使用"body" 作为应用程序组件的选择器？
谢谢，刚试了没成功。应用程序仍然有效，但我认为它只在 body 内部引导，而没有 body 本身。如果我将选择器更改为html - 它会用组件模板替换我的头部和身体..
【参考方案1】：
使用<body> 作为应用组件可以正常工作，但您不能在<body> 标记上使用绑定，因为它会尝试将“isFixed”绑定到父级并且没有父级。
改用@HostBinding
@Component(
selector: 'body',
templateUrl: 'app_element.html'
)
class AppElement
@HostBinding('class.fixed')
bool isFixed = true;
这是 Dart 代码，但翻译成 TS 应该不难。
另见@HostBinding and @HostListener: what do they do and what are they for?
如果你不依赖服务器端渲染或网络工作者，你总是可以使用纯 JS 来更新 DOM。
或者你也可以使用
document.body.classList.add('foo');
【讨论】：
我认为这可能是一个解决方案，但我无法制作使用 HostBinding 的最简单示例。你有任何示例的链接吗？..来自 angular.io/docs 的示例不适用于我.. 我只使用 Dart，我试过了，它对我有用。您能否根据您的示例创建一个 Plunker，然后我们尝试找出它为什么不起作用？ 我让 HostBinding 工作了，但这次我不会使用它。在某些情况下，我只会在 body 上添加类。但我无法选择角度为 2 的元素（或者我不知道如何选择）。 @Günter Zöchbauer 你能看看这个问题吗***.com/questions/34432980/… 谢谢 很高兴听到您成功了。我认为另一个问题在 Dart 中完全不同，因此我无法帮助您。 @StepanSuvorov 感谢您的提示。新文档链接中不再有示例：-/ 我添加了指向另一个答案的链接，该答案有更多解释。以上是关于Angular 2.x 在 body 标签上绑定类的主要内容，如果未能解决你的问题，请参考以下文章