我正在升级现有的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