如何将DOM附加到Angular 2组件并仍然获取封装样式

我正在升级现有的Angular 2应用程序，该应用程序大量使用JQuery插件，D3，甚至一些React组件（所有这些都使用sizzle所以我很确定它适用于所有）。 因为一次重写所有这些实际上没有意义，我试图将它们中的一些包装在Angular 2 Component中。 为了向您展示我的意思，我有一个使用Jquery将项添加到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("
Output 2
") } } 

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

  
 
output 1
 
 
Output 2
  

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

更新

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

Answer 1

如果你使用像这样的风格

 :host .output { ... } 

它应该适用。

如果这不起作用

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

Answer 2

我想你可以从nativeElement获取ngAfterViewInit中的_ngcontent-ylc-1属性。 然后将此属性应用于附加的html。