कोणीय 2 सीएसएस शैलियों घटक से बाहर निकलने

Question

Plunker with the problem I'm having. "यदि आप थर्डकंपोनेंट में शैलियों को टिप्पणी करते हैं तो आप इसे माता-पिता और भाई घटकों की शैलियों को प्रभावित कर सकते हैं।" - adriancarriger (आप एड्रियन धन्यवाद)

मेरी घटक में मैं उपयोग कर रहा हूँ ...

styles: [' 
    @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; 
    @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; 
'] 

लेकिन यह किसी भी घटक है कि यह एक फोन की शैली को बर्बाद कर रहा है। मुझे केवल इस घटक में शैली की आवश्यकता है। मैंने सोचा कि कोणीय 2 घटक पूरी तरह से स्वतंत्र थे, यह पता नहीं लगा सकता कि यह मेरा पूरा वेब ऐप क्यों बदलता है। मैं इसे इस तरह से करना

import { Component, OnInit } from '@angular/core'; 
import datetimepicker from 'eonasdan-bootstrap-datetimepicker'; 
import moment from 'moment'; 


@Component({ 
    selector: 'date-time-picker', 
    styleUrls: ['../../../css/datetimepicker.css'], 
    template:` 
        <div class="input-group"> 
         <input class="form-control" 
         a2e-datetimepicker 
         [date]="date" 
         [options]="a2eOptions" 
         (onChange)="dateChange($event)" 
         (onClick)="dateClick()" 
         /> 
         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
        </div> 
    ` 
}) 
export class DateTimePicker implements OnInit { 

    date: moment.Moment; 
    a2eOptions: any; 

    dateChange(date) { 
    this.date = date; 
    } 

    dateClick() { 
    console.log('click click!') 
    } 

    getTime() { 
    alert('Selected time is:' + this.date); 
    }; 

    addTime(val, selector) { 
    this.date = moment(this.date.add(val, selector)); 
    }; 

    clearTime() { 
    this.date = null; 
    }; 

    constructor(){ 
     this.date = moment(); 
     this.a2eOptions = { 
      format: 'dddd, MMMM Do YYYY, h:mm a', 
      //sideBySide: true, 
      stepping: 5 
     }; 
    } 

    ngOnInit(): void { 
    console.log(datetimepicker); 
    } 

} 

datetimepicker.css

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; 
@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; 

एक ही परिणाम है, तो:

घटक

template:` 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"> 

का उपयोग systemJS

Answer 1

देखें कैप्सूलीकरण के संबंध में सह mponent शैलियों द्वारा आपके मौजूदा चयनकर्ता को कोणीय द्वारा जोड़े गए एक कस्टम विशेषता के साथ विस्तारित करता है।

उदाहरण:

मेजबान तत्व <my-thrid-component _nghost-dra-1> हो जाता है।
इसके सभी बच्चे उदा। <h3 _ngcontent-dra-1>।

कोणीय अब अपनी सीएसएस चयनकर्ताओं लेता है और उन्हें लागू होता है:

h3 { ... }h3[_ngcontent-dra-1] { ... } हो जाता है, तो अपने शैलियों केवल घटक अपने आप में तत्वों के लिए लागू होते हैं।

अब वापस अपने मौजूदा चयनकर्ताओं भाग का विस्तार करने के लिए।
जब आप @import बाहरी फ़ाइल, इसकी सामग्री नहीं प्राप्त की जाती है - फ़ाइल को बाहरी संसाधन के रूप में लोड किया जाएगा और इसलिए कोणीय इसे संशोधित नहीं कर सकता है।

, उत्पन्न style टैग पर एक नज़र ले रहा है प्रकट करता है, क्या वास्तव में हो रहा है:

<style> 
    @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; 
    @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; 

    h1[_ngcontent-dra-1], 
    h2[_ngcontent-dra-1], 
    h3[_ngcontent-dra-1] { 
    background: red; 
    } 
</style> 

निष्कर्ष: ऐसी कोई बात नहीं नेस्टेड आयात, इसलिए आयातित शैलियों के रूप में विश्व स्तर पर लागू किए जाते हैं नहीं है। यदि आप वास्तव में केवल एक विशिष्ट घटक के लिए शैलियों को शामिल करना चाहते हैं, तो आपको उन्हें स्थानीय रूप से उपलब्ध कराने की आवश्यकता है, इसलिए कोणीय इसकी सामग्री पढ़ सकता है और चयनकर्ताओं को बढ़ा सकता है।