Angular 2 css style leaking out of component

Question

Plunker with the problem I'm having. "Jeśli skomentujesz style w ThirdComponent, zobaczysz, że ma to wpływ na style komponentów rodzica i rodzeństwa." - adriancarriger (Dziękuję Adrian)

W moim składnika używam ...

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"; 
'] 

ale wydaje się, aby zniszczyć stylu dowolnego składnika, który nazywamy ten. Potrzebuję tylko stylu w tym jednym komponencie. Myślałem, że Angular 2 komponenty są całkowicie niezależne, nie mogę zrozumieć, dlaczego ten zmienia moją całą aplikację internetową.

komponent:

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"; 

same wyniki, jeśli robię to w ten sposób:

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"> 

Korzystanie systemJS

Answer 1

Zobacz enkapsulacji w zakresie od współ style mponent działa przez rozszerzenie istniejących selektorów o niestandardowy atrybut dodany przez kątowe.

przykład:

Element host <my-thrid-component _nghost-dra-1>.
Wszystkie jego dzieci stają się np. <h3 _ngcontent-dra-1>.

kątowa teraz ma swoje selektorów CSS i rozciąga je:

h3 { ... } staje h3[_ngcontent-dra-1] { ... }, więc wasze style mają zastosowanie tylko do elementów samego komponentu.

Teraz z powrotem do rozszerzając istniejące selektory część.
Po pobraniu zewnętrznego pliku jego zawartość nie zostanie pobrana - plik zostanie załadowany jako zasób zewnętrzny i dlatego kątowy nie może go zmodyfikować.

Przyjrzeniu wygenerowanym style tagu, ujawnia, co się rzeczywiście dzieje:

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

Wniosek: Nie ma czegoś takiego jak zagnieżdżonych importu zatem importowane style są stosowane globalnie. Jeśli naprawdę chcesz uwzględnić style tylko dla konkretnego komponentu, musisz mieć je lokalnie dostępne, aby kąt mógł odczytać jego zawartość i rozszerzyć selektory.