css - Angular 2 css 样式从组件中泄漏出来

Question

Plunker with the problem I'm having. “如果您注释掉 ThirdComponent 中的样式，您会发现它会影响父组件和同级组件的样式。” – 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";
']

但它似乎破坏了调用此组件的任何组件的样式。我只需要这个组件中的样式。我认为 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);
  }

}

日期时间选择器.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">

使用系统JS

Answer 1

关于组件样式的 View 封装通过使用 Angular 添加的自定义属性扩展现有选择器来实现。

Example:

The host element becomes <my-thrid-component _nghost-dra-1>.
All its children become e.g. <h3 _ngcontent-dra-1>.

Angular now takes your css selectors and extends them:

h3 { ... } becomes h3[_ngcontent-dra-1] { ... }, so your styles only apply to elements in the component itself.

现在回到扩展现有选择器部分。
当你@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 可以读取其内容并扩展选择器。