jQuery技术:如何将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?

    如果你使用像这样的风格

     :host .output { ... } 

    它应该适用。

    如果这不起作用

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

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

    需要了解更多jQuery教程分享如何将DOM附加到Angular 2组件并仍然获取封装样式,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

      以上就是jQuery教程分享如何将DOM附加到Angular 2组件并仍然获取封装样式相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/981639.html

      (0)
      上一篇 2021年12月12日
      下一篇 2021年12月12日

      精彩推荐