标签: angular2-hostbinding

我想使用HostBinding装饰器来添加一个类，该类不能像@HostBinding('class.myClass').

我知道有可能将其绑定到整个class属性，例如@HostBinding('class')，但这显然会重置直接添加到我的主机元素中使用它的位置的所有类。

那么是否可以使用HostBinding, 但仅添加一个类并在 html 中保留所有先前添加的类？

目前我最终得到了更丑陋的解决方案：

@Component({
    ...
})
class MyComponent implements OnInit {
    constructor(private hostElement: ElementRef,
                private renderer: Renderer2) { }

    ngOnInit() {
        const randomClass = `dynamic-${Math.floor(Math.random() * 10) + 1}`;
        this.renderer.addClass(this.hostElement.nativeElement, dynamicClass);
    }
}

是否可以像这个例子一样绑定@HostBinding值？

@Input() user: User;
@HostBinding("class.temp") user.role == "Admin"

我知道我可以这样做:

private _user: User;
@Input() set user(user: User) {
    this._user = user;
    this.temp = (this._user.role == "Admin");
}
@HostBinding("class.temp") temp: boolean;

但在这种情况下,如果我的用户更改了他的角色,则该组件中的值永远不会更新.这该怎么做 ？

我已经成功地@HostBinding在我的 Angular 6 应用程序中使用将属性应用到宿主组件，就像在变量为真时应用类一样：

@HostBinding('class.compact-ui') isCompact;

但是，现在我需要根据选择菜单的模型分配 4 个可能的类之一。例如，用户可以red，blue或green。

我想我可以在任何颜色为真时使用多个主机绑定：

@HostBinding('class.green-ui') uiColor === 'green';

但这似乎是错误的。这样做的正确方法是什么？

我一直在尝试使用@HostBinding装饰性设置动画参数，但似乎不起作用，我想念的是什么

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

和主机绑定

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

我需要创建一个Angular 2+(我在4.x)指令(非组件),通过添加背景图像@HostBinding.我知道我很亲密,但是当我检查它时,我会看到background-image: noneChrome的检查员.

import { Directive, HostBinding } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Directive({
    selector: '[myDirectiveWithBackgroundImage]'
})
export class MyDirective {

    @HostBinding('style.background-image')
    public backgroundImage: SafeStyle;

    constructor(private sanitizer: DomSanitizer) {
        this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
            'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
    );
  }
}

我的资产/ images/favicon.16png由webpack提供.我已经试过各种路径选项,/assets,~/assets,等...但background-image总是none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview