Lesen statische Dateien in angular2 als String

Question

Ich habe eine angular2 Komponente wie folgt aus:

@Component({ 
    selector: 'demo', 
    template: ` 
     <div [innerHTML]="content"></div> 
    `; 
}) 
export class demoComponent { 
    @Input() step: string; 

    private content: string = ''; 

    ngOnInit() { 
     if (this.step === "foo") { 
      this.content = "bar"; 
     } 
    } 
} 

und ich möchte einige Logik verwenden, auf die am besten geeignete Vorlage zu entscheiden, zu machen. Ich habe eine Reihe von statischen HTML-Dateien von Express auf myDomain.com/templates serviert. Also muss ich ./templates/xyz.html in eine Zeichenfolge in meiner ng2-Komponente "lesen" können. Ähnlich wie die API fs.ReadFileSync in nodeJS. Wie kann ich das machen? HTTP-Anruf? Dateileser?

Answer 1

Die kurze Antwort ist, dass Sie nicht synchron statische Dateien lesen können, da sie auf eine asynchrone API des Browsers angewiesen sind.

Davon abgesehen könnten Sie einen Dienst nutzen, um alle Ihre Ressourcen zu laden, und darauf warten, dass dieser Dienst alles geladen hat, bevor Sie Ihre Anwendung starten. Der Dienst APP_INITIALIZER ermöglicht dies. Hier

ist ein Beispiel:

bootstrap(AppComponent, [ 
    { provide: APP_INITIALIZER, 
    useFactory: (service:GlobalService) =>() => service.load(), 
    deps:[GlobalService, HTTP_PROVIDERS], multi: true 
    } 
]); 

Die Load-Methode so etwas möchte:

load():Promise<Site> { 
    return new Promise(resolve => { 
    this.http.get('somestaticfile.html') 
     .map(res => res.text() }) 
     .subscribe(text => { 
     this.staticContent = text; 
     }); 
    }); 
} 

Anschließend können Sie in Ihrer Anwendung verwenden, die staticContent Eigenschaft synchron:

@Component({ 
    selector: 'demo', 
    template: ` 
    <div [innerHTML]="content"></div> 
    ` 
}) 
export class demoComponent { 
    @Input() step: string; 

    private content: string; 

    constructor(service:GlobalService) { 
    this.content = service.staticContent; 
    } 
} 

Siehe diese Frage für weitere Details:

• Angular 2 - Services consuming others services before call a method