Question

我试图在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属性，但没有应用于内部元素，因为它们没有属性。有没有办法告诉Angular2将该属性赋予组件的所有元素，即使是由jQuery自动生成的？我不想在DOM中搜索该属性，并手动将其添加到afterViewInit中的所有子元素。

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

Answer 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。查看封装是为了防止样式渗入其他组件。

另见

在Angular2 Component中创建的样式jQueryUI元素

1 个答案: