Parsing HTML remoto in Angular con HttpClient

Mattepuffo's logo
Parsing HTML remoto in Angular con HttpClient

Parsing HTML remoto in Angular con HttpClient

Ho diversi script PHP che richiamo tramite AJAX che mandano in output HTML invece che JSON.

Questi script me li vorrei riportare così come sono in un'applicazione scritta in Angular.

Quindi devo fare una chiamata a questi script tramite il modulo HttpClient, e poi visualizzarli nella pagina.

Vediamo come fare; partiamo dallo script remoto in PHP:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: text/plain; charset=UTF-8");
?>

<h1>CIAO!</h1>

Come vedete è un esempio molto semplice.

Adesso tocca al nostro service in Angular:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
    providedIn: 'root'
})

export class MyService {

    constructor(private http: HttpClient) {
    }

    getTestHtml(): Observable<any> {
        return this.http.get('https://www.sito.it/api/test.php', {responseType: 'text'});
    }
}

Nel nostro componente:

import {Component, OnInit} from '@angular/core';
import {MyService} from '../service/my-service.service';

@Component({
    selector: 'app-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss']
})

export class MyComponent implements OnInit {

    public htmlText: string;

    constructor(private myService: MyService) {
    }

    ngOnInit(): void {
        this.myService.getTestHtml().subscribe(
            data => this.htmlText = data,
            error => console.log(error)
        );
    }
}

Infine nella nostra pagina:

<div [innerHTML]="htmlText"></div>

La direttiva innerHTML serve per fare il parsing dell'HTML; sennò vedreste i tag (fate una prova per capire meglio).

Enjoy!


Share this Post

Commentami!