Angular 2 css样式泄露出组件

发布时间：2020-12-17 08:45:47 所属栏目：安全来源：网络整理

导读：Plunker with the problem I’m having.“如果你注释掉ThirdComponent中的样式,你会发现它会影响父级和兄弟组件的样式.” – adriancarriger(谢谢Adrian) 在我的组件中,我正在使用…… styles: [' @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7

Plunker with the problem I’m having.“如果你注释掉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

通过使用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>
  @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可以读取其内容并扩展选择器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!