angular - 获取组件的静态 html/css 快照

Question

简而言之:如何获取组件生成的 CSS 字符串？

-> 我想获取我的组件的快照。也就是说， View 看起来像什么。就是您单击右键-> 检查时看到的内容。从任何 Javascript 独立呈现组件的 Html 和 css。

动机:使用该快照稍后导出为 PDF。我可以在服务器端创建 PDF，但既然 Angular 有一个简洁的模板引擎，为什么不用它呢？欢迎评论。

我设法从我的 banana 组件中获取快照 html 代码，如下所示:

// 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 以某种方式将此内联:

#report[_ngcontent-c4] {
  font-weight: bold; 
}

有没有办法以某种方式以编程方式获得这个^？我希望上面的 bananaSnapshotCss 变量能够准确地保存它。还是我的整个方法都错了？

现在，我正在手动将我的 css 文件的内容复制到 bananaSnapshotCss 中，因此，它是我的 TS 代码的一部分。这是丑陋且重复的代码，并且忽略了嵌套的子组件样式。

查看实时样本 here ，包括当前的解决方法(app/app.ts 和 TODO)

Answer 1

您可以将 getComputedStyle() 方法应用于 elementRef.nativeElement(阅读更多相关信息 here)。

对于您的示例，这意味着:

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