Übergeben Sie Daten von HTML-Text an Root-Komponente

Question

Ich habe versucht, Daten aus Hauptlayout index.html Datei an die eckige Wurzel/Startkomponente <my-app> übergeben. Leider kann ich sie nicht so übergeben: <my-app [bodyData]="'passed'" ></my-app> aus meiner index.html.

Kann mir jemand helfen, wie kann ich sie weitergeben? Bereitstellung einer Testverbindung

Plunker Test App Link

Answer 1

Property Bindung an den Root-Komponenten nicht funktioniert, das heißt die Komponenten, die Sie Bootstrap.

Der Grund, warum dies nicht funktioniert, ist, dass Ihre index.html, in die Sie das platzieren, keine eckige Komponente ist. Aus diesem Grund wird Angular dieses Element nicht kompilieren. Und Angular liest Attributwerte nicht während der Laufzeit, sondern nur während der Kompilierungszeit, da wir andernfalls einen Performance-Treffer erhalten würden. (Tobias Bosch)

Sehen Sie diese Frage:

• Angular 2 input parameters on root directive

Eine Abhilfe wäre das DOM zu nutzen:

<my-app bodyData="passed" ></my-app> 

und in der Komponente:

@Component({ 
    selector: 'my-app', 
    template: ` 
    (...) 
    ` 
}) 
export class MyAppComponent { 
    constructor(private eltRef:ElementRef) { 
    let prop = eltRef.getAttribute('bodyData'); 
    } 
} 

Dies funktioniert nur für String-Attribute ...

Answer 2

Ich habe das gleiche Szenario versucht. Aber ich bekomme den Wert als null.

In meinem HTML habe ich den Tag

<my-app myattr="passed" >Loading ..</my-app>  

Und in der Komponente habe ich

constructor(private _elementRef: ElementRef){ 
    let native = this._elementRef.nativeElement; 
    let test = native.getAttribute("myattr"); 
    alert(test); 
} 

Das Alarmwert kommt als null

Answer 3

verwendet

Es ist immer schön lang wieder zu beleben tot Themen. Hier ist meine Lösung. Ich benutzte localStorage in index.html:

<script> 
     localStorage.setItem('startpath', window.location.pathname); 
</script> 

Dann im app.component einfach:

ngOnInit() { 

    var startpath = localStorage.getItem('startpath'); 
    if (startpath) { 
     localStorage.removeItem('startpath'); 
     this._router.navigate([startpath]); 
    } else 
     this._router.navigate(['/dashboard']); 
} 

Answer 4

Wie @Thierry oben erklärt, seine vorgeschlagene Methode für das Bestehen String Attribute nur gültig ist. Im Folgenden finden Sie eine Methode, mit der Sie ein Objekt mit definierten Eigenschaften übergeben können.

Erstellen Sie eine Klasse für die Daten, die Sie übergeben möchten.

appdata.ts

export class AppData { 
    public isServerRunning: boolean; 
    public isDataFromMemory: boolean; 
} 

eine Instanz auf dem Fensterobjekt Definieren Sie Ihre Startdaten

Index enthält.html

<script>window.APP_DATA = { isServerRunning: false, isDataFromMemory: false } 

Sagen Sie der Bootstrap-Code über sie.

main.tss

import { AppData } from './app/appdata'; 

die Daten über einen Service an Ihre Komponenten

app.module.ts

import { AppData } from './appdata'; 
... 
providers: [AppData, 
{ 
    provide: AppData, 
    useValue: window['APP_DATA'] 
} 
], 

Zugang Geben Sie die Daten von einer Komponente

App component.ts

constructor(appData:AppData) { 
    console.log('AppComponent - ', appData); 
}