Angular 2 - Arten arbeiten nicht in AOT bauen

Question

ich diese Funktion bin mit der Art meiner Komponente hinzuzufügen, wenn der Parameter widget=true in der URL vorhanden ist:

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'; 
} 

Es funktioniert perfekt, wenn Just In Time (JIT gebaut) funktioniert aber nicht, wenn es in Ahead of Time (AOT) eingebaut ist. Warum ist das und wie kann ich es beheben?

Answer 1

Verwenden wir ein einfaches Beispiel, um dies zu erklären. Stellen Sie sich Ihre Route ist:

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

Sie zu dieser Strecke mit den Parametern navigieren können mit dem folgenden Code:

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

Diese in der folgenden URL /widget;widget=true Hinweis führt: Eckige verwendet eine Semikolons zur Trennung die Params anstelle eines Fragezeichens.

Dokumentation kann here

In Ihrer Komponente finden Sie die params wie diese bekommen:

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

An dieser Stelle haben Sie eine Variable mit dem param in Ihrer Komponente können Sie nun bedingte Styling .

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

So berühren Sie nie das DOM direkt und Winkel wird alles behandeln.