Znacznik skryptu Json-ld dla angularjs2

Question

Próbuję automatycznie wygenerować skrypt jsonld w angularjs2, jednak znalazłem rozwiązanie dla angularjs1. Czy ktoś ma rozwiązanie tego problemu.

Answer 1

znalazłem trochę „brzydki”, ale rozwiązanie jest wykonywana przy użyciu „safeHtml” rura:

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

Używając go w parze z Angular Universal można wstawić dowolny kod skryptu:

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

Przetestowałem wyjście tego kodu w Google Structured Data Testing Tool i działa tak, jak oczekiwano.

Answer 2

Rozwiązanie bez użycia rury (nieco czysty sposób)

Użyj this.sanitizer.bypassSecurityTrustHtml warunkiem https://angular.io/guide/security#sanitization-and-security-contexts

W szablonie

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

W części/dyrektywa

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