Angular2: propriété de l'hôte du composant

Ce n' @Component.host propriété?

Selon Angular2 documentation il représente:

l'hôte de la carte de propriété de la classe d'accueil de l'élément de liaisons pour les événements, les propriétés et les attributs.

Je n'arrive pas à comprendre quel est-il?

Je suis en posant ce dans le but de comprendre un truc code que j'ai collé derniers jours.

Le code est:

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

source d'informationauteur Jordi

  1. 14

    J'ai ajouté de la classe d'accueil tag.

    Comme suit:

    • Composant

      @Composant({ 
sélecteur: 'montag', 
templateUrl: './layout.template.html', 
hôte: { 
'class' : 'myclass1 myclass2 myclass3' 
} 
}) 
l'exportation de la classe MyTagComponent {

    • Afficher le code

      <mytag></mytag>

    • Résultat

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

  2. 2

    L'hôte de la propriété est utilisée pour lier les événements de tous les attributs de cette classe de composant.Voir mon code ce serait de vous aider comme je le voudrais concentrer mes composant et de se concentrer quand aucune utilisation 

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

    ce focusOutFunction est active lorsque la fenêtre est flou qui j'ai lié avec (window:blur)événement et focusInFunction whic je l'ai appliqué avec (window:focus) événement.
    Il fonctionne sur tout mon attributs déclarés dans cette classe de composant.Espérons que cela pourrait vous aider à comprendre

  3. 2

    basé sur cette document, la directive sur les propriétés à l'intérieur de votre propriété host ([class.nav-static][class.chat-sidebar-opened] et [class.app] dans votre extrait de code) doit se changer à chaque fois que leur expression correspondant à des valeurs se changer.

    Par exemple, votre [class.nav-static] propriété obtenez la valeur de 'config.state["nav-static"]' expression et il sera mis à jour chaque fois que la valeur de l'expression est mise à jour.