角2 - 樣式不要在AOT工作建立

我使用這個功能來添加樣式到我的組件如果參數widget=true存在於網址：角2 - 樣式不要在AOT工作建立

addStyleSheet() { 
    var headID = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.type = 'text/css'; 
    link.rel = 'stylesheet'; 
    link.id = 'widget_styles'; 
    headID.appendChild(link); 

    link.href = './app/open-account/open-account-widget-styles.component.css'; 
}

當內置準時它完美（JIT ），但在建立在前面（AOT）時不起作用。爲什麼是這樣的，我該如何解決它？

來源

2017-02-28 georgej

我不知道確切的答案，但我可以告訴你一件事是確定的：直接與DOM API交互通常被認爲是不好的做法。如果您需要動態將樣式應用於組件，請考慮在組件的根標記上使用attribute指令。 –

讓我們用一個簡單的例子來解釋這個。想象這是你的路線：

{ path: '/widget', component: WidgetComponent }

可以導航到使用下面的代碼參數路線：

this.router.navigate(
    ['/widget'], { queryParams: { widget: 'true' } } 
);

這將導致以下網址/widget;widget=true注：角使用分離的分號參數而不是問號。

文檔可以發現here

在你的組件，你可以得到PARAMS這樣的：

this.route 
    .queryParams 
    .subscribe(params => { 
    this.widget = params['widget'] === 'true'; 
    });

在這一點上，你必須在你的組件帕拉姆一個變量，你現在可以使用條件樣式。

<div [ngClass]="{class_name: widget}">Lorum ipsum</div>

這樣你就不會直接觸摸DOM，角將處理所有事情。

來源

2017-02-28 21:45:56

角2 - 樣式不要在AOT工作建立

回答

相關問題