Angular 2 css样式泄露出组件

Question

我正在遇到的问题."如果你注释掉ThirdComponent中的样式,你会发现它会影响父级和兄弟组件的样式." - adriancarriger(谢谢Adrian)

在我的组件中,我正在使用......

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

但它似乎破坏了任何称之为这个组件的组件的风格.我只需要这个组件中的样式.我认为Angular 2组件完全独立,无法弄清楚为什么这个组件会改变我的整个Web应用程序.

零件:

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

组件样式方面的视图封装通过使用 Angular 添加的自定义属性来扩展现有选择器来工作。

例子：

宿主元素变为<my-thrid-component _nghost-dra-1>。
它的所有孩子都成为例如<h3 _ngcontent-dra-1>。

Angular 现在采用你的 css 选择器并扩展它们：

h3 { ... }变为h3[_ngcontent-dra-1] { ... }，因此您的样式仅适用于组件本身的元素。

现在回到扩展现有选择器部分。
当您使用@import外部文件时，不会获取其内容 - 该文件将作为外部资源加载，因此 Angular 无法修改它。

查看生成的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>

结论：不存在嵌套导入这样的东西，因此导入的样式会全局应用。如果您确实只想包含特定组件的样式，则需要让它们在本地可用，以便 Angular 可以读取其内容并扩展选择器。