서버에서 html을 가져 와서 각도로 표시

Question

REST 서비스에서 HTML을 검색하고 각도 (4.3)를 사용하여 표시하려고합니다. 서비스가 호출되어 올바른 내용을 반환하는 것을 볼 수 있습니다. 그러나 이것을 사용하는 각 구성 요소는 실제로 내용을 수신하지 못합니다. 나는 무엇을 놓쳤는가?

구체적으로 (아래 번째 코드 샘플)을 console.log(html) 항상 널 출력한다.

@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 }); 
    } 
} 

이 컴퍼넌트에 의해 사용되는 :

이

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

새로운 HttpClient 클래스는 get() 방법은 JSON 응답을 반환 할 것으로 예상

나는처럼 보이는 각도 서비스가있다. 당신은 텍스트 (HTML)를 기대하는 경우, 요청 옵션에 necessary to specify it입니다 :

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

특수 Accept 헤더는 다음 불필요 할 수있다.

Answer 2

안녕하세요 당신은 서비스

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)) 
} 

이 시도하고 구성 요소

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

을 템플릿에 어떻게 서비스를보고

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