Question

我正在升级现有的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("<div class='output'>Output 2</div>")
  }
}

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

<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=""。当JQuery注入DOM时，有没有办法让Ng2添加它？

更新

问题类似于这个（Angular2 - adding [_ngcontent-mav-x] to styles），但我想问题是如何在ViewEncapsulation中包含注入的dom？

Answer 1

如果你使用像

这样的风格

:host .output {
  ... 
}

应该应用它。

如果这不起作用，请使用

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

Answer 2

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

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

2 个答案: