如何将DOM附加到Angular 2组件,并仍然获得封装样式 [英] How do I append DOM to an Angular 2 component and still get encapsulated styles
问题描述
我正在升级现有的Angular 2应用程序,大量使用JQuery插件,D3,甚至一些React组件(所有的使用sizzle所以我很确定它适用于所有)。因为它真的没有意义,重写所有这些一次,我试图包装一些Angular 2组件。为了告诉你我的意思我有一个简单的组件,使用Jquery添加一个项目到DOM ...
I am upgrading an existing Angular 2 app that makes extensive use of JQuery Plugins, D3, and even some React Components (All of which use sizzle so I am pretty sure it applies to all). Since it really doesn't make sense to rewrite all of these at once I am trying to wrap some of them in an Angular 2 Component. To show you what I mean I have a simple component that uses Jquery to add an item to the DOM...
import { Component, AfterViewInit, ElementRef } from '@angular/core';
declare var $:JQueryStatic;
@Component({
selector: 'px-spinner',
template: String(require('./spinner.template')),
styles: [require('!raw!stylus-loader!./spinner.styles')]
})
export class SpinnerComponent implements AfterViewInit{
constructor(public el:ElementRef){}
ngAfterViewInit(){
$(this.el.nativeElement).append("<div class='output'>Output 2</div>")
}
}
这里的问题是样式不适用于输出2.当我看着DOM,原因变得明显.. 。
The problem here is the styles are not applied to output 2. When I look at the DOM the reason becomes apparent...
<ng-spinner class="ng-scope" id="NG2_UPGRADE_0_pxSpinner_c0" _nghost-ylc-1="">
<div _ngcontent-ylc-1="" class="start">
<div _ngcontent-ylc-1="" class="output">output 1</div>
</div>
<div class="output">Output 2</div>
</ng-spinner>
JQuery添加的DOM元素缺少 _ngcontent-ylc-1 =
。有什么办法让Ng2在JQuery注入DOM时添加这个?
The DOM Element added by JQuery is missing the _ngcontent-ylc-1=""
. Is there a way to have Ng2 add this when JQuery injects the DOM?
更新
问题类似于此问题( Angular2 - 添加[_ngcontent-mav -x] to styles )但我想问题是如何在ViewEncapsulation中包含注入的dom?
The question is similar to this one (Angular2 - adding [_ngcontent-mav-x] to styles) but I guess the question is how do I include the injected dom in the ViewEncapsulation?
推荐答案
p>如果您使用类似
:host .output {
...
}
它应该应用。
无法使用
:host /deep/ .output {
...
}
这篇关于如何将DOM附加到Angular 2组件,并仍然获得封装样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!