Вкратце: Как получить сгенерированный CSS моего компонента в виде строки?
- > Я хочу получить снимок моего компонента. То есть, как выглядит этот вид. Только то, что вы видите, когда вы щелкаете правой кнопкой → проверяете. Html и css для рендеринга компонента независимо от любого Javascript.
Мотивация: используйте этот снимок для последующего экспорта в формате PDF. Я могу создать PDF файлы по-серверу, но поскольку Angular имеет аккуратный механизм шаблонов, почему бы не использовать его для этого? Комментарии приветствуются.
Мне удалось получить html-код моментального снимка из моего banana -компонента следующим образом:
// 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
}
}
Например, переменная snapshotHtml выглядит следующим образом:
<banana _ngcontent-c2="" _nghost-c4="" ng-reflect-render="true"><!--bindings={
"ng-reflect-ng-if": "true"
}--><div _ngcontent-c4="" id="report">
some text
</div></banana>
Но я понятия не имею, как получить соответствующий bananaSnapshotCss. Согласно Firefox, Angular каким-то образом помещает этот inline:
#report[_ngcontent-c4] {
font-weight: bold;
}
Есть ли способ получить это ^ как-то программно? Я хочу, чтобы моя переменная bananaSnapshotCss была выше. Или мой подход не так?
Сейчас я вручную копирую содержимое своих css файлов в bananaSnapshotCss и, таким образом, это часть моего кода TS. Это уродливый и повторяющийся код и игнорирует вложенные стили дочерних компонентов.
Смотрите живой пример здесь, включая текущее обходное решение (app/app.ts с TODO)
