2016-08-09 7 views
2

Ich habe eine angular2 Komponente wie folgt aus:Lesen statische Dateien in angular2 als String

@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?

Antwort

0

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:

+0

Vielen Dank für diese so sehr. In meiner Anwendung verwende ich nur diese "Demo" -Komponente in einer Subkomponente, die für die meisten Benutzer nicht verwendet wird, also glaube ich, dass die Verwendung dieser im Bootstrap jeden Benutzer hält, ob sie die Demo-Komponente verwenden oder nicht? Wenn das korrekt ist, gibt es eine Möglichkeit, die Komponente, die '' verwendet, nur "zu halten"? –