Стиль jQueryUI элемент, созданный в компоненте Angular2

Я пытаюсь включить слайдер диапазона jQueryUI внутри компонента Angular2.Стиль jQueryUI элемент, созданный в компоненте Angular2

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, 
     }); 

    } 
}

Это работает правильно, и мой генерироваться дом выглядит следующим образом:

<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 я пишу новые свойства для классов, связанных с u-slider, но css применяется только к <div id="slider">, так как он получил атрибут _ngcontent-xxx-3, но не для элементов внутри, поскольку у них нет этого атрибута. Есть ли способ сказать, что Angular2 имеет этот атрибут для всего элемента компонента, даже если он сгенерирован jQuery автоматически? Я не хочу искать в DOM для этого атрибута и вручную указывать все подэлементы в afterViewInit.

PS: Я работаю с Angular2 версии 2.0.0-alpha.46

источник

2016-01-20 David Gonzalez

Я думаю, вам нужно переключить вид инкапсуляцию 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, 
})

Угловая по умолчанию использует ViewEncapsulation.Emulated. Просмотр инкапсуляции - это предотвращение стирания стилей в других компонентах.

Смотрите также

источник

2016-01-20 12:49:06

Спасибо за быстрый и правильный ответ. У меня есть другой вопрос: использование ViewEncapsulation.None делает, что мой css влияет на весь html, есть ли способ сделать его применимым только к моему компоненту? –

Я не уверен, мне нужно будет расследовать. Думаю, CSS повлияет на элемент, где он добавлен, и дети. –

Стиль jQueryUI элемент, созданный в компоненте Angular2

ответ

Смежные вопросы