Angular2:组件主机属性

Question

什么是@Component.host财产立场？

根据Angular2文档,它代表:

host - 类属性的映射,用于事件,属性和属性的宿主元素绑定.

我不太明白它的用途是什么？

我这样做是为了理解我最后几天遇到的东西代码.

代码是:

@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>

Answer 2

主机属性用于将事件绑定到该特定类组件的所有属性。请参阅我的代码这对您有帮助，因为我希望关注我的组件并在不使用时关注

host: {
    '(window:blur)': 'focusOutFunction($event)',
    '(window:focus)': 'focusInFunction($event)',
  }

focusOutFunction当窗口模糊时这是活动的，我与(window:blur)事件绑定并且focusInFunction我与(window:focus) 事件绑定。它适用于我在这个类组件中声明的整个属性。希望这会帮助你理解

Answer 3

根据本文档，只要相应的表达式值发生更改[class.nav-static]，您的主机属性（,[class.chat-sidebar-opened]和[class.app]您的代码片段中）中的指令属性就会更改。

例如，您的[class.nav-static]属性将获得'config.state["nav-static"]'表达式的值，并且只要表达式的值更新，它就会更新。