Tag script JSON-ld per angularjs2

Question

Non riesco a generare automaticamente lo script jsonld in angularjs2, tuttavia ho trovato una soluzione per angularjs1. Qualcuno ha una soluzione per questo.

Answer 1

Ho trovato un po ' "brutto", ma la soluzione di lavoro utilizzando pipe "SafeHTML":

import {Pipe, PipeTransform} from '@angular/core'; 
import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; 

@Pipe({name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(protected sanitized:DomSanitizer) { 
    } 

    transform(value:any):SafeHtml { 
     return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

Utilizzando in tandem con il Angular Universal, è possibile inserire qualsiasi codice di script:

<div [innerHtml]="'<script type=\'application/ld+json\'>' + jsonLdStringifiedObj + '</script>' | safeHtml"></div> 

Ho testato l'output di questo codice nel Google Structured Data Testing Tool e funziona come previsto.

Answer 2

soluzione senza l'utilizzo di un tubo (modo un po 'pulito)

Utilizzare il this.sanitizer.bypassSecurityTrustHtml fornito https://angular.io/guide/security#sanitization-and-security-contexts

Nel modello

<div [innerHtml]="jsonLDString"></div> 

Nel componente/direttiva

private jsonld: any; 
    public jsonLDString: any; 

    private setJsonldData() { 
     this.jsonld = { 
      '@context': 'http://schema.org/', 
      '@type': 'Service', 
      'name': this.providerName, 
      'description': this.providerDescription, 
      'aggregateRating': { 
      '@type': 'AggregateRating', 
      'ratingValue': '3', 
      'bestRating': '5', 
      'ratingCount': '3' 
      }, 
      'url' : this.providerUrl 
     }; 
     this.jsonLDString = '<script type="application/ld+json">' + JSON.stringify(this.jsonld) + '</script>'; 
     this.jsonLDString = this.sanitizer.bypassSecurityTrustHtml(this.jsonLDString); 
     }