Angular 2 : Component host property

Question

@Component.host 属性代表什么？

根据 Angular2 documentation它代表:

host - map of class property to host element bindings for events, properties and attributes.

我不太明白这是干什么用的？

我提出这个问题是为了理解我最近几天遇到的一段代码。

代码是:

@Component({
  selector: 'layout',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './layout.template.html',
  host: {
    '[class.nav-static]' : 'config.state["nav-static"]',
    '[class.chat-sidebar-opened]' : 'chatOpened',
    '[class.app]' : 'true',
    id: 'app'
  }
})
export class Layout {

Answer 1

我已将类添加到主机标签。

喜欢以下内容:

• 组件

  @Component({
    selector: 'mytag',
    templateUrl: './layout.template.html',
    host: {
      'class' : 'myclass1 myclass2 myclass3'
    }
  })
  export class MyTagComponent {
  

• 查看代码

  <mytag></mytag>

• 结果

  <mytag class="myclass1 myclass2 myclass3"></mytag>