个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我有一个基于 bootstrap3 的模板，我正在向它添加 angular2。
当更改从登录到应用程序其余部分的路由时，我需要更改正文的类，这是我的根组件选择器。
根组件
@Component({
selector: 'body',
directives: [ROUTER_DIRECTIVES],
templateUrl: '<router-outlet></router-outlet>'
})
export class AppComponent {
loggedIn = true;
@HostBinding('class.class1')
@HostBinding('class.home-page') homeBodyClasses = false;
@HostBinding('class.class3')
@HostBinding('class.login-page') loginBodyClasses = false;
constructor(private router: Router) { }
ngOnInit() {
if (!this.loggedIn) {
this.router.navigate(['SignIn']);
} else {
this.router.navigate(['Home']);
}
this.router.events.subscribe(event => {
console.log(event);
if (event instanceof NavigationEnd) {
if (event.urlAfterRedirects === '/SignIn') {
this.homeBodyClasses = false;
this.loginBodyClasses = true;
}else{
this.homeBodyClasses = true;
this.loginBodyClasses = false;
}
}
});
}
我订阅了路由器导航事件，但是当 url 更改时，尽管 @HostBinding 的值已更改，但什么也没有发生。
我尝试从子组件向 body 发射事件，并更改 body 标签以像这样捕获事件，但没有任何反应。
<body (eventName) = "changeBodyClass($event)"></body>
我做错了什么？我不明白什么时候应该更改@HostBinding 的值以使其生效。我正在使用 angular2.0.0-rc.5
最佳答案
你不能在 app-root 组件之外使用 @HostBinding。
您可以使用 body 作为应用程序根组件的选择器，然后使用 @HostBinding 或者您可以使用 Renderer2修改 body 类。不建议使用 jquery 执行此操作。
使用 Renderer2 你可以做类似的事情
renderer.addClass(document.body, "myClass");
或
renderer.removeClass(document.body, "myClass");
关于angular - 在 Angular 2 中使用 @HostBinding 动态更改正文类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38924708/
26
4
0
我正在寻找使用异步值处理 HostBinding 的最佳方法。 在 Angular v2.1.2 之前，我可以像这样在 @Directive 装饰器中使用 host 属性: @Directive({
我已在我的 Angular 6 应用程序中成功使用 @HostBinding 将属性应用于主机组件，就像在变量为真时应用类一样: @HostBinding('class.compact-ui') is
找不到它的文档。 从示例中我得到了 3 个案例: @HostBinding(" attr .something") @HostBinding(" class .something") @HostBin
我想知道在使用组件的 @HostBinding 和 host 属性之间是否存在巨大差异(如果存在，差异是什么？)？ 我在使用动画时一直在问自己这个问题，因为我在这些情况下(看起来很接近): @Comp
我在世界各地的互联网上闲逛，现在尤其是 angular.io style docs ，我找到了很多对 @HostBinding 和 @HostListener 的引用。看起来它们非常基础，但不幸的是目
我有一个带有加载、错误显示和实际内容的包装器。根据某些输入，我想显示一个或另一个。 我想测试是否有任何错误添加了 'center__holder' 类 组件: @Component({ selec
我正在使用 @HostBinding 将函数的结果绑定(bind)到宿主元素的可见属性: @HostBinding('attr.visible') private get visibleAttr():
我正在尝试将 CSS 类 foo 绑定(bind)到我的主机组件，使用 @HostBinding 取决于我在动态 变量。但无法使其正常工作。 这是我已经尝试过的: export class MyCom
我有这段代码在主机上设置了一个类: @HostBinding('class.fixed') true; 我想做的是使它成为一个我可以修改的变量类。我该怎么做？ 最佳答案 这不能变成可变的。 您可以做的
是否可以像此示例一样绑定(bind) @HostBinding 值？ @Input() user: User; @HostBinding("class.temp") user.role == "Adm
我有一个有用户登录和注销功能的 Angular 应用程序。在用户登录之前，我会显示一个欢迎页面作为主页。我只想在欢迎页面上启用背景图像。用户登录后，背景图像必须消失。当用户注销时，他将被重定向到欢迎页
我有一个使用 @HostBinding 设置类的组件: @HostBinding('class.dark-1') true; 效果很好。但是，现在我需要在我的组件中创建一个函数来动态更改类。 例如，当
我使用 @HostBinding 与 Chrome 的拖放 API 一起设置一个类，如下所示: @Directive({ selector: '[sortable-article]' }) expor
我的根本问题是我需要设置一个异步函数 alters an attribute of the host .由于 @HostBinding 没有异步能力，我在组件上设置了一个实例变量，绑定(bind)它，
flex-layout 没有在宿主元素上应用内联样式，宿主元素通过@HostBinding 获取它们的 flex-layout 属性 @Component({ selector: 'colum
这个问题在这里已经有了答案: In RC.1 some styles can't be added using binding syntax (2 个答案) 关闭 6 年前。 使用 @HostBin
问题: 是否可以使用 @HostBinding 来添加、删除或切换宿主元素上的类，而不是删除预先存在的类，特别是当类需要动态切换？ 例如，这将添加 light 类并且不会中断之前的类；但是，light
我正在尝试使用 @HostBinding 装饰器在宿主元素上设置 ngIf。 class ListItem { @HostBinding('ngIf') active: boolean = f
我有一个基于 bootstrap3 的模板，我正在向它添加 angular2。 当更改从登录到应用程序其余部分的路由时，我需要更改正文的类，这是我的根组件选择器。 根组件 @Component({
在我的 TSLint 文件中，我有: "no-unused-variable": true 在我的组件中，我有时会: // tslint:disable-next-line:no-unused-var
我是一名优秀的程序员,十分优秀！