En resumen: ¿Cómo obtengo el CSS generado de mi componente como una cadena?
-> Quiero obtener una instantánea de mi componente. Es decir, cómo se ve la vista misma. Justo lo que ves cuando haces clic derecho->inspeccionar. Html y css para renderizar el componente independientemente de cualquier Javascript.
Motivo: utilice esa instantánea para exportarla posteriormente como PDF. Podría crear los archivos PDF en el servidor, pero dado que Angular tiene un motor de plantillas ordenado, ¿por qué no usarlo para eso? Comentarios bienvenidos.
Logré obtener el código html de la instantánea de mi componente banana de esta manera:
// banana component file @Component( { selector: 'banana', template: `<div id="report">some text</div>`, styles: [ '#report { font-weight:bold; }' ] }) export class BananaComponent { constructor(public elementRef: ElementRef) { } } // parent component file @Component(...) export class App { @ViewChild(BananaComponent) myBanana; private getSnapshot() { let bananaSnapshotHtml = this.myBanana.elementRef.nativeElement.outerHTML; let bananaSnapshotCss = // ?? TODO } } La variable snapshotHtml , por ejemplo, se ve así:
<banana _ngcontent-c2="" _nghost-c4="" ng-reflect-render="true"><!--bindings={ "ng-reflect-ng-if": "true" }--><div _ngcontent-c4="" id="report"> some text </div></banana> Pero no tengo idea de cómo obtener el respectivo bananaSnapshotCss . Según Firefox, Angular de alguna manera pone esto en línea:
#report[_ngcontent-c4] { font-weight: bold; } ¿Hay alguna manera de obtener este ^ de alguna manera mediante programación? Quiero que mi variable bananaSnapshotCss anterior contenga esto exactamente. ¿O todo mi enfoque es incorrecto?
En este momento, estoy copiando manualmente el contenido de mis archivos css en bananaSnapshotCss y, por lo tanto, es parte de mi código TS. Este es un código feo y duplicado e ignora los estilos de componentes secundarios anidados.
Vea una muestra en vivo aquí , incluida la solución actual ( app/app.ts con TODO )
Puede aplicar el método getComputedStyle() a elementRef.nativeElement (lea más sobre esto aquí ).
Para su ejemplo, esto significaría:
// banana component file @Component( { selector: 'banana', template: `<div id="report">some text</div>`, styles: [ '#report { font-weight:bold; }' ] }) export class BananaComponent { constructor(public elementRef: ElementRef) { } } // parent component file @Component(...) export class App { @ViewChild(BananaComponent) myBanana; private getSnapshot() { let bananaSnapshotHtml = this.myBanana.elementRef.nativeElement.outerHTML; let bananaSnapshotCss = getComputedStyle(this.myBanana.elementRef.nativeElement); } }Si puede generar PDF en el lado del cliente, sugeriría usar una consulta de medios CSS: @media print { ... }
La razón principal es que DOM no refleja el estado de "aplicación" . Solo la representación del DOM exportado no es compatible. Más, su componente CSS no será suficiente para reproducir todos los estilos (agente, página, imbricación de componentes, etc.).
La mayoría de las herramientas que tienen renderizado basado en la web del lado del servidor (PDF, imágenes, ...) están usando PhantomJS para generar una "instantánea" .
En el caso de Angular, también puede echar un vistazo a Angular Universal que ofrece renderizado del lado del servidor.
Use document.documentElement.innerHTML para obtener todo el DOM con CSS en línea y guardar.