如何将DOM附加到Angular 2组件并仍然获得封装样式 [英] How do I append DOM to an Angular 2 component and still get encapsulated styles

问题描述

我正在升级现有的Angular 2应用程序，广泛使用JQuery插件，D3，甚至一些React组件（所有这些都使用sizzle，所以我很确定它适用于所有）。由于它一次重写所有这些并没有任何意义，我试图将其中的一些包含在角度2组件中。为了告诉你我的意思是我有一个简单的组件，使用Jquery来添加一个项目到DOM ...

  import { Component，AfterViewInit，ElementRef} from'@ angular / core'; 
 declare var $：JQueryStatic; 
 @Component（{
 selector：'px-spinner'，
 template：String（require（'./ spinner.template'）），
 styles：[require（' 
 
 export class SpinnerComponent实现AfterViewInit {
构造函数（public el：ElementRef）{} 
 ngAfterViewInit（ ）{
 $（this.el.nativeElement）.append（< div class ='output'>输出2< / div>）
} 
} 
  

这里的问题是样式不适用于输出2.当我看DOM时，原因变得明显。

 < ng-spinner class =ng-scopeid =NG2_UPGRADE_0_pxSpinner_c0_nghost-ylc-1 = > 
< div _ngcontent-ylc-1 =class =start> 
< div _ngcontent-ylc-1 =class =output>输出1< / div> 
< / div> 
< div class =output>输出2< / div> 
< / ng-spinner> 
  

JQuery添加的DOM元素缺少 _ngcontent-ylc-1 = 。当JQuery注入DOM时，有没有办法让Ng2添加？

更新

问题类似于此（ Angular2 - 添加[_ngcontent-mav -x]到样式），但我猜问题是如何将注入的dom包含在ViewEncapsulation中？

解决方案

p>如果您使用的样式如

 ：host .output {
 ... 
} 
  

应该应用

如果不能使用

 ：host / deep / .output {
 ... 
} 
  

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>")
  }
}

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>

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?

Update

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?

解决方案

If you use a style like

:host .output {
  ... 
}

it should be applied.

If this doesn't work use

:host /deep/ .output {
  ... 
}

这篇关于如何将DOM附加到Angular 2组件并仍然获得封装样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！