在 Angular2 组件中创建样式 jQueryUI 元素答案

【问题标题】：Style jQueryUI element created in Angular2 Component在 Angular2 组件中创建样式 jQueryUI 元素
【发布时间】：2016-04-26 07:48:12
【问题描述】：

我正在尝试在 Angular2 组件中包含一个 jQueryUI 范围滑块。

doubleRange.ts：

/// <reference path="../../../../../typings/jquery/jquery.d.ts" />
/// <reference path="../../../../../typings/jqueryui/jqueryui.d.ts" />
import { Component, ElementRef, AfterViewInit, Renderer } from 'angular2/angular2'

declare var jQuery:JQueryStatic;

@Component({
    selector: 'double-range',
    template: `<div id="slider"></div>`, 
    styleUrls: ['application/common/js/widgets/double-range-widget/double-range-widget.css'],
})
export class DoubleRangeWidget implements AfterViewInit{

    constructor(private m_elementRef: ElementRef, private m_renderer: Renderer) {
    }

    afterViewInit(){
        jQuery(this.m_elementRef.nativeElement).find("#slider").slider({
           range:true,
        });

    }
}

这可以正常工作，我生成的 dom 看起来像这样：

<div id="slider" _ngcontent-xxx-3 class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 36%; width: 34%;"></div>
    <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 36%;"></span>
    <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 70%;"></span>
<div>

当我尝试将新的 CSS 应用到我的组件时出现问题。在我的 css 文件中，我为 ui-slider 相关类编写了新属性，但 css 仅适用于 <div id="slider">，因为它具有 _ngcontent-xxx-3 属性，但不适用于 inside 元素，因为它们没有该属性。有没有办法告诉 Angular2 让组件的所有元素都具有该属性，即使是由 jQuery 自动生成的？我不想在 DOM 中搜索该属性并将其手动添加到 afterViewInit 中的所有子元素中。

PS：我正在使用 Angular2 版本 2.0.0-alpha.46

【问题讨论】：

标签： jquery css jquery-ui angular

【解决方案1】：

我认为您需要将视图封装切换为None

@Component({
    selector: 'double-range',
    template: `<div id="slider"></div>`, 
    styleUrls: ['application/common/js/widgets/double-range-widget/double-range-widget.css'],
    encapsulation: ViewEncapsulation.None,
})

Angular 默认使用ViewEncapsulation.Emulated。视图封装是为了防止样式渗入其他组件。

另见

【讨论】：

感谢您快速而正确的回答。我还有一个问题：使用 ViewEncapsulation.None 会使我的 css 影响整个 html，有没有办法让它只适用于我的组件？
我不确定，我需要调查一下。我猜 CSS 会影响添加它的元素和子元素。