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

【问题标题】：How do I append DOM to an Angular 2 component and still get encapsulated styles如何将 DOM 附加到 Angular 2 组件并仍然获得封装样式
【发布时间】：2017-02-19 01:46:37
【问题描述】：

我正在升级现有的 Angular 2 应用程序，该应用程序广泛使用 JQuery 插件、D3 甚至一些 React 组件（所有这些都使用 sizzle，所以我很确定它适用于所有组件）。由于一次重写所有这些确实没有意义，我试图将其中一些包装在 Angular 2 组件中。为了向您展示我的意思，我有一个简单的组件，它使用 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=""。有没有办法让 Ng2 在 JQuery 注入 DOM 时添加这个？

更新

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

【问题讨论】：

标签： jquery angularjs dom d3.js angular

【解决方案1】：

如果你使用像

这样的风格

:host .output {
  ... 
}

它应该被应用。

如果这不起作用，请使用

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

【讨论】：

这只会使其全局正确吗？我想保留 ViewEncapsulation
更新以反映我仍然希望它与封装在组件中的 DOM 隔离。
你不能在 ViewEncapsulation 中包含被感染的 DOM。仿真是在构建时（使用 AOT）或创建组件时计算的。不过，可能可行的是从组件宿主元素中读取_ngcontent-ylc-1 属性并将其也应用于注入的HTML。 /deep/ 不会使样式全局化，但选择器会被重写，这样子组件也会被寻址。
感谢 Gunter 的澄清，我会尝试并回复您！
Host 是一个匹配当前元素的选择器。使用:host xxx 或:host /deep/ xxx，所有匹配xxx 的后代元素都会被寻址。

【解决方案2】：

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

【讨论】：

我试图避免这种类型的 hacky 修复，但它可能是某些人目前唯一的选择。
是的，这是个糟糕的选择。最好的解决方案是以有角度的方式重写它。