Question

@Component.host属性代表什么？

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

基于this文档，您的主机属性（代码段中的[class.nav-static]，[class.chat-sidebar-opened]和[class.app]）内的指令属性应在相应的表达式值时更改变了。

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

Answer 3

host属性用于将事件绑定到该特定类组件的所有属性。查看我的代码，这将对您有所帮助，因为我希望将焦点放在我的组件上并在没有用时集中注意力

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

当窗口模糊时，此focusOutFunction处于活动状态，我与(window:blur)事件绑定，focusInFunction与(window:focus)事件绑定。它适用于我在此类组件中声明的整个属性。希望这有助于您理解

Answer 4

使用host属性，我们只能将带有组件的类或事件附加为其他答案中给出的示例。所以，如果我尝试类似的事情：

@Component({
selector: 'my-selecter',
  host: {
    fxLayout:'row',
    fxLayoutAlign:'start stretch', 
    fxLayoutGap:'10px'  
  },
  providers: [
    my-provider
  ],
  templateUrl: './my-template.component.html'
})

根据我的意图，它不会在我的组件上应用Flex-layout属性。

Answer 5

等效于@HostListener和@HostBinding。

在角度样式参考中，他们说：

考虑将@HostListener和@HostBinding优先于主机 @Directive和@Component装饰器的属性

Angular2：组件主机属性

5 个答案: