Tengo una aplicación Angular 4 Universal y quiero empezar a utilizar microdatos en formato JSON-LD .
Utiliza una etiqueta de secuencia de script con algún contenido, por ejemplo:
<script type="application/ld+json"> { "@context": "http://schema.org", ... } </script> Dado que estos datos deben cambiar por vista, estoy buscando una manera de inyectar estos datos en el cambio de ruta en Angular 4. Actualmente, las etiquetas de script se eliminan de las plantillas . Cuando se utiliza una solución alternativa con docuemnt.createElement , esto no funciona en la aplicación Angular Universal del lado del servidor.
¿Cómo haría esto?
EDITAR
Uso Angular 4.xx, que ahora se conoce como Angular simple. Inyecto el document así:
import { DOCUMENT } from '@angular/platform-browser'; class Test { constructor(@Inject(DOCUMENT) private _document) { } public createScriptTag() { this._document.createElement('script'); // doesn't work server-side } }EDITAR: como se señaló en los comentarios, esta solución es una solución pirateada y debe usarse con precaución.
Puede inyectar algún otro tipo y función "ɵgetDOM" y "ɵDomAdapter" para obtener una referencia al dom. Perdón por llamarlo "algún" servicio y función, porque no tengo ni idea de por qué lo nombran así. Acabo de examinar el código fuente y cómo lo está haciendo el equipo angular con MetaService.
import { Inject } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { ɵgetDOM, ɵDomAdapter, DOCUMENT } from '@angular/platform-browser'; @Injectable() export class SeoService { private dom: ɵDomAdapter; constructor(@Inject(DOCUMENT) private document: any, private titleService: Title, private metaService: Meta) { this.dom = ɵgetDOM(); let scriptEl = this.dom.createElement('script'); // .. } }He probado esto y lo uso en producción.