Question

Plunker with the problem I'm having.＆＃34;如果您注释掉ThirdComponent中的样式，您可以看到它影响父组件和兄弟组件＆＃39;样式＆＃34。 - 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组件是完全独立的，无法弄清楚为什么这个组件会改变我的整个网络应用程序。

组件：

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可以读取其内容并扩展选择器。

Angular 2 css样式泄露出组件

1 个答案: