Récupérer html du serveur et afficher avec Angular

Question

J'essaie de récupérer du code HTML à partir d'un service REST et l'afficher en utilisant Angular (4.3). Je peux regarder le service s'appeler et retourner le contenu correct. Cependant, le composant angulaire utilisant ceci ne semble jamais réellement recevoir le contenu. Qu'ai-je manqué? De manière spécifique, un console.log(html) (dans le deuxième exemple de code ci-dessous) sort toujours une valeur nulle.

J'ai un service angulaire qui ressemble à:

@Injectable() 
export class SlidesService { 

    private requestUrl: string; 

    constructor(
     @Inject(AppConfig) private config: AppConfig, 
     @Inject(HttpClient) private http: HttpClient) { 
     this.requestUrl = this.config.restRoot + listSlidesUrl; 
    } 


    getSlide(deck: string, slide: string): Observable<string> { 

     const headers: HttpHeaders = new HttpHeaders({'Accept': 'text/html'}); 
     const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide; 

     return this.http.get<string>(thisUrl, { headers: headers }); 
    } 
} 

Ceci est utilisé par un composant:

export class SlidePreviewComponent implements OnInit { 

    @Input() slide: string;  /* Identifier for the slide */ 
    @Input() deck: string; 
    slideHtml: string; 


    constructor(private slideService: SlidesService) { 

     } 

    ngOnInit(): void { 
     this.slideService.getSlide(this.deck, this.slide) 
      .subscribe(html => this.setSlideHtml(html)); 
    } 

    setSlideHtml(html: string) { 
     this.slideHtml = html; 
     console.log(html); 
    } 
} 

Answer 1

La nouvelle classe HttpClient attend la méthode get() pour revenir réponse JSON. Si vous attendez un texte (HTML), il est necessary to specify it dans les options de demande:

this.http.get(thisUrl, { headers: headers, responseType: 'text' }); 

L'en-tête Accept spéciale peut être donc inutile.

Answer 2

Salut peut vous essayer en service

getSlide(deck: string, slide: string){ 
    const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide; 
    return this.http 
     .get(url ,{ headers: headers, responseType: 'text' }) 
     .toPromise() 
     .then(resp => resp.text()) 
     .catch(error=>console.log(error)) 
} 

et votre composant

ngOnInit(): void { 
     this.slideService.getSlide(this.deck, this.slide) 
      .subscribe(html => this.setSlideHtml(html)); 
    } 
setSlideHtml(html) { 
     this.slideHtml = html; 
     console.log(html); 
    } 

dans votre modèle

<div id="scroll" [innerHTML]="slideHtml"></div>