होस्ट तत्व में "क्लास" कैसे जोड़ें?

187

मुझे नहीं पता कि मेरे घटक को <component></component>एक डायनामिक क्लास विशेषता में कैसे जोड़ा जाए, लेकिन टेम्पलेट html (घटक। Html) के अंदर।

एकमात्र समाधान जो मैंने पाया है वह है "एलिमेंटरिफ़" मूल तत्व के माध्यम से आइटम को संशोधित करना। यह समाधान कुछ ऐसा करने के लिए थोड़ा जटिल लगता है जो बहुत सरल होना चाहिए।

एक अन्य समस्या यह है कि सीएसएस को घटक दायरे से बाहर परिभाषित किया जाना है, घटक एनकैप्सुलेशन को तोड़ना।

क्या कोई सरल उपाय है? <root [class]="..."> .... </ root>टेम्पलेट के अंदर कुछ ऐसा है ।

angular angular2-template

— lascarayf
स्रोत

293

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

प्लंकर उदाहरण

इस तरह आपको घटक के बाहर CSS जोड़ने की आवश्यकता नहीं है। सीएसएस की तरह

:host(.someClass) {
  background-color: red;
}

घटक के अंदर से काम करता है और चयनकर्ता केवल तब लागू किया जाता है जब कक्षा someClassमेजबान तत्व पर सेट की जाती है।

— गुंटर ज़ोचबॉयर
स्रोत

मैं करना था someField = trueमें ngOnInit()-method बजाय ngAfterViewInit()। मुझे अन्यथा काम करने के लिए नहीं मिला।

— जॉन

यहां एक कांटा बनाया गया है जो वास्तविक :hostभाग को दिखाता है । मैं कहां से @Component में मेजबान पैरामीटर () डेकोरेटर (वाक्य रचना मेरे लिए स्पष्ट नहीं है, और के बारे में अधिक सीख सकते हैं @Component प्रलेखन बहुत ज्यादा स्पष्ट नहीं होता ) या अपने पसंदीदा HostBinding बारे में अधिक जानने (यह केवल है एक अंतरफलक के रूप में सूचीबद्ध पर Angular2 साइट?)

— लाल मटर

मैं बेहतर डॉक्स नहीं जानता, लेकिन यह सिर्फ एक अलग तरीका है कि आप इसके साथ क्या कर सकते हैं@Input() @Output() @HostBinding() @HostListener() @ViewChild(ren)() @ContentChild(ren)()

— गुंटर ज़ोचाउर

1

होस्ट बाइंडिंग के लिए एक अलग नाम के साथ एक गेट्टर का उपयोग करें जो उलटा मूल्य लौटाता है@HostBinding('class.xxx') get xxxclass(){ return !this.someField;}

— Günter Zöchbauer

1

@YochaiAkoka निश्चित नहीं है कि आप क्या संदर्भित करते हैं। मुझे इस नियम की जानकारी नहीं है। कम आमतौर पर अधिक होता है, इसलिए यदि आप अतिरिक्त तत्वों को जोड़ने से बच सकते हैं, तो आपको इससे बचना चाहिए।

— गुंटर ज़ोचौएर

184

गुंटर का जवाब बहुत अच्छा है (सवाल गतिशील वर्ग विशेषता के लिए पूछ रहा है) लेकिन मुझे लगा कि मैं पूर्णता के लिए जोड़ूंगा ...

यदि आप अपने घटक के होस्ट तत्व (यानी, थीम-स्टाइल उद्देश्यों के लिए) में एक या एक से अधिक स्थिर कक्षाएं जोड़ने के लिए एक त्वरित और स्वच्छ तरीके की तलाश कर रहे हैं , तो आप यह कर सकते हैं:

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

और यदि आप एंट्री टैग पर एक क्लास का उपयोग करते हैं, तो कोणीय कक्षाओं को मर्ज करेगा, अर्थात

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

— JoshuaDavid
स्रोत

1

इस सादगी के लिए प्यार करो। हालांकि मेरे मामले में मेजबान तत्व एक अलग विशेषता के साथ समझाया गया है, आइए इसे मेरे घटक के ngcontent_hostमेरे टेम्पलेट , let's call those ngcontent_template , so if I put a style in the styleUrls ' में तत्वों की किसी भी विशेषता से कॉल करें , वे होस्ट तत्व को प्रभावित नहीं करेंगे क्योंकि वे प्रभावित नहीं करेंगे ngcontent_host, वे केवल टेम्पलेट तत्वों को प्रभावित कर सकता है; वे केवल प्रभावित कर सकते हैं ngcontent_template। क्या मैं गलत हूं? इस पर कोई सुझाव? मुझे लगता है कि मैं हमेशा बदल सकता हूंViewEncapsulation.None

— लाल मटर

11

एक और तरीका सिर्फ चर को छोड़ना है @HostBinding('class.someClass') true;,। आप इसे किसी भी वर्ग से भी कर सकते हैं जो आपका घटक बढ़ाता है।

— adamdport

3

कई वर्ग जोड़ने के लिए आप होस्ट कर सकते हैं: {'[वर्ग]': '' class1 class2 "'}

— jbojcic

4

यदि आप होस्ट का उपयोग करते हैं: {}वैरिएंट, आप में use-host-property-decoratorसेटिंग सेट करना चाह सकते हैं । अन्यथा आप IDE चेतावनियाँ प्राप्त करेंगे। @adamdport वह विधि काम नहीं करती (अब)। हमारे ऐप में कोणीय 5.2.2 का उपयोग करना। falsetslint.json

— रुद वोस्त

1

क्या यह सिर्फ मुझे है, या पुराने तरीके नए तरीके से बेहतर लगते हैं? मुझे यकीन है कि उनके पास पलायन करने का अच्छा कारण था, लेकिन मुझे ...

— क्रश

12

आप बस @HostBinding('class') class = 'someClass';अपने @Component class के अंदर जोड़ सकते हैं ।

उदाहरण:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

— माइक डी 3 आईडीडी टायसन
स्रोत

1

ClassName निर्देश भी इस्तेमाल किया जा सकता है और इसके उपयोग से बचने के लिए बेहतर है classएक चर नाम के रूप में (जब से तुम इसे संदर्भ हो सकता है और इसे बाद में बदल)। उदाहरण: @HostBinding('className') myTheme = 'theme-dark';।

— CPHPython

3

यदि आप अपने होस्ट तत्व में एक डायनामिक क्लास जोड़ना चाहते हैं, तो आप अपने HostBindingको एक गेटर से जोड़ सकते हैं

@HostBinding('class') get class() {
    return aComponentVariable
}

स्टैकब्लिट्ज डेमो https://stackblitz.com/edit/angular-dynamic-hostbinding पर

— Saksham
स्रोत

0

यहाँ मैंने यह कैसे किया (कोणीय 7):

घटक में, एक इनपुट जोड़ें:

@Input() componentClass: string = '';

फिर घटक के HTML टेम्पलेट में कुछ इस तरह जोड़ें:

<div [ngClass]="componentClass">...</div>

और अंत में HTML टेम्पलेट में जहां आप घटक को टाइप करते हैं:

<root componentClass="someclass someotherclass">...</root>

अस्वीकरण: मैं काफी कोणीय के लिए नया हूँ, तो मैं यहाँ भाग्यशाली हो सकता है!

— zippycoder
स्रोत

2

थोड़ा नेक्रो लेकिन: यह सीएसएस वर्ग को मेजबान तत्व में नहीं जोड़ता है - जो कि <root>टैग के लिए तत्व है , न कि आप तत्व के टेम्पलेट में कुछ भी जोड़ते हैं।

— मिलिम्मोस