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

我试图在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,
        });

    }
}

//
/// 
从'angular2/angular2'导入{Component，ElementRef，AfterViewInit，Renderer}
声明var jQuery:JQueryStatic；
@组成部分({
选择器：“双量程”，
模板：``，
styleURL:['application/common/js/widgets/double-range-widget/double-range-widget.css']，
})
导出类DoubleRangeWidget实现AfterViewInit{
构造函数（专用m_elementRef:elementRef，专用m_渲染器：渲染器）{
}
afterViewInit（）{
jQuery（this.m#elementRef.nativeElement）.find（“#slider”）.slider({
范围：对，
});
}
}

这可以正常工作，生成的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滑块相关类编写了新属性，但css仅应用于

，因为它具有

\ngcontent-xxx-3

属性，而不应用于内部元素，因为它们没有该属性。 有没有一种方法可以告诉Angular2，即使是由jQuery自动生成的，组件的所有元素都有该属性？我不想在DOM中搜索该属性并手动将其添加到afterViewInit中的所有子元素

---

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

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

无

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

@组件({
选择器：“双量程”，
模板：``，
styleURL:['application/common/js/widgets/double-range-widget/double-range-widget.css']，
封装：视图封装。无，
})

默认情况下，Angular使用

视图封装。视图封装是为了防止样式渗入其他组件

另见




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