Angular2: свойство узла компонента

Что означает свойство @Component.host?

Согласно Angular2 documentation, это означает:

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 {

Ответ 1

Я добавил класс в тег хоста.

Как показано ниже:

компонент

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

Просмотреть код

<mytag></mytag>
Результат

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

Ответ 2

на основе этого документа свойства директивы внутри вашего свойства хоста ([class.nav-static], [class.chat-sidebar-opened] и [class.app] в вашем фрагменте кода) должны изменяться всякий раз, когда их соответствующие значения выражений получают изменилось.

Например, ваше [class.nav-static] получит значение выражения 'config.state["nav-static"]' и будет обновляться при каждом обновлении значения выражения.

Ответ 3

Свойство host используется для привязки событий ко всем атрибутам к этому конкретному компоненту класса. Посмотрите на мой код, это поможет вам, поскольку я хочу сосредоточиться на моем компоненте и сосредоточиться, когда не используется

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

этот focusOutFunction активен, когда окно размыто, которое я привязал с событием (window:blur) и focusInFunction, с которым я привязан к событию (window:focus). Он работает над всеми моими атрибутами, объявленными в этом классе. Надеюсь, это поможет вам понять

Ответ 4

С помощью свойства host мы можем прикреплять классы или события только с компонентами, как примеры приведены в других ответах. Итак, если я попробую что-то вроде:

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

В соответствии с моим намерением он не будет применять атрибуты Flex-layout к моему компоненту.