कोणीय 2: घटक मेजबान संपत्ति

Question

@Component.host संपत्ति के लिए क्या खड़ा है?

Angular2 documentation के अनुसार यह खड़ा के लिए:

मेजबान - वर्ग संपत्ति के नक्शे घटनाओं, गुणों और विशेषताओं के लिए तत्व बाइंडिंग की मेजबानी के लिए।

मुझे यह पता नहीं है कि इसके लिए क्या है?

मैं पिछले कुछ दिनों में एक स्टफ कोड को समझने के लिए इसे प्रस्तुत कर रहा हूं।

कोड है:

@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

मेजबान संपत्ति component.See मेरी कोड यह आप में मदद मिलेगी के रूप में मैं अपने घटक के लिए ध्यान केंद्रित करना चाहते हैं और जब कोई फायदा नहीं

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

बाहर ध्यान केंद्रित है कि विशेष वर्ग के लिए सभी विशेषताओं को घटनाओं बाध्य करने के लिए प्रयोग किया जाता है यह focusOutFunction सक्रिय है जब खिड़की धुंधला है जिसे मैंने (window:blur) ईवेंट और focusInFunction से बांध दिया है, जिसमें मैंने (window:focus) ईवेंट के साथ बाध्य किया था। यह इस वर्ग घटक के भीतर घोषित मेरे पूरे गुणों पर काम करता है। उम्मीद है कि यह आपको

समझने में मदद करेगा