Angular2: Hosteigenschaft der Komponente

Question

Was bedeutet @Component.host Eigenschaft?

Nach Angular2 documentation es steht für:

Host - Karte der Klasse Eigenschaft Host-Element-Bindings für Ereignisse, Eigenschaften und Attribute.

Ich weiß nicht genau, wofür ist es?

Ich posiere das, um einen Stuff-Code zu verstehen, den ich letzten Tage feststeckte.

Der Code ist:

@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

I Klasse hinzugefügt haben Tag zu bewirten.

wie folgt vor:

• Komponente

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

• Ansicht Code

  <mytag></mytag>

• Ergebnis

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

Answer 2

basierend auf this Dokument, die Richtlinie Eigenschaften in Ihrem Host-Eigenschaft ([class.nav-static], [class.chat-sidebar-opened] und [class.app] in Ihr Code-Snippet) sollte sich ändern, wenn die entsprechenden Ausdrücke Werte ändern zu bekommen.

Zum Beispiel erhält Ihre [class.nav-static] -Eigenschaft den Wert 'config.state["nav-static"]' Ausdruck und es wird aktualisiert, wann immer der Wert des Ausdrucks aktualisiert wird.

Answer 3

Die Host-Eigenschaft wird verwendet, um die Ereignisse zu allen Attributen zu dieser bestimmten Klasse zu binden component.See meinen Code diese Ihnen helfen würde, wie ich meine Komponente konzentrieren wollen und konzentrieren sich, wenn keine Verwendung

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

Diese focusOutFunction ist aktiv, wenn Fenster Unschärfe ist, die ich mit (window:blur) Ereignis und focusInFunction verbunden bin, die ich mit (window:focus) Ereignis verbunden bin. Es funktioniert auf meine gesamten Attribute in dieser Klasse deklariert.Hoff Ihnen dies zu verstehen