如何將DOM附加到Angular 2組件並仍然獲取封裝樣式

我正在升級現有的Angular 2應用程序，該應用程序廣泛使用JQuery插件，D3甚至一些React組件（所有這些應用程序都使用sizzle，因此我很確定它適用於所有）。因爲一次重寫所有這些都沒有意義，所以我試圖將其中的一部分包裝在Angular 2組件中。爲了向你展示我的意思我有一個使用了jQuery項目添加到DOM一個簡單的組件...如何將DOM附加到Angular 2組件並仍然獲取封裝樣式

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>") 
    } 
}

這裏的問題是樣式不會當我看着DOM應用於輸出2原因變得明顯...

<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），但我想這個問題是我怎麼包括在ViewEncapsulation注入DOM？

來源

2016-10-10 Jackie

如果你使用像

:host .output { 
    ... 
}

風格也應適用。

如果這不起作用使用

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

來源

2016-10-10 15:27:00

這隻會使它全球正確？我想保留ViewEncapsulation – Jackie

已更新，以反映我仍然希望它與封裝在組件中的DOM隔離。 – Jackie

您不能在ViewEncapsulation中包含入侵的DOM。仿真是在構建時（使用AOT）或組件創建時計算的。可能的工作方式是從組件主機元素中讀取_ngcontent-ylc-1屬性，並將其應用到注入的HTML中。 '/ deep /'不會使樣式成爲全局變量，但是選擇器會被重寫，以便組件子元素也被處理。 –

我認爲你可以在ngAfterViewInit從nativeElement的_ngcontent-YLC-1性能。然後將此屬性應用於您的附加html。

來源

2016-10-10 19:22:52 penghui

我試圖避免這種類型的hacky修復，但它可能是一些人的唯一當前選項。 – Jackie

是的，這是不好的選擇。最好的解決方案是以有角度的方式重寫它。 – penghui

如何將DOM附加到Angular 2組件並仍然獲取封裝樣式

回答

相關問題