css - 如何使用@hostbinding 将类赋予 Angular 2 中的宿主元素

Question

我想为我的组件的宿主元素提供一个类，所以直到现在我都像这样使用 host 属性:

@Component({
  selector: 'left-bar',
  host: { 'class': 'left-bar' },
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {

  ngOnInit() {
  }

}

虽然我从 TypeScript 收到警告，这是一种不好的做法。

[tslint] In the "@Component" class decorator of the class "LeftBarComponent" you are using the "host" property, this is considered bad practice. Use "@HostBindings", "@HostListeners" property decorator instead.

如何以更正确的方式向宿主元素添加类并消除此警告？

谢谢!

更新:基于下面的答案:我得到了类，但样式在添加类后不影响父宿主元素。我的风格很简单:

.left-bar {
  position: fixed;
  width: 120px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #323232; }

Answer 1

Angular2 风格指南说更喜欢 @HostBinding，但这并不会使 host: {...} 成为一件坏事。

你可以使用

@Component({
  selector: 'left-bar',
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {
  @HostBinding('class.left-bar') leftBarClass = true;
  // or @HostBinding('class') leftBarClass = 'left-bar';

  ngOnInit() {
  }

}