如何使用 ViewChild 获取 Angular 中组件的完整 HTML 和 CSS（计算样式）？

Question

我有一个 Angular 组件，我需要使用 ViewChild 提取完整的 HTML 内容以及计算出的特定元素的 CSS 样式。我目前可以使用以下方式获取 HTML 内容：

@ViewChild('mySelector', { static: false }) mySelector!: ElementRef;
const htmlContent = this.mySelector?.nativeElement?.innerHTML;

html 代码缺少一些 css 样式

链接这是 stackblitz 的链接

Answer 1

在 Angular 中使用 ViewChild 获取组件的 HTML 内容和计算样式

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-style-extractor',
  template: `
    <div #mySelector>
      <!-- Your component content -->
    </div>
  `
})
export class StyleExtractorComponent implements AfterViewInit {
  @ViewChild('mySelector', { static: false }) mySelector!: ElementRef;

  ngAfterViewInit() {
    // Get both HTML and computed styles
    this.getFullContentWithStyles();
  }

  getFullContentWithStyles() {
    if (!this.mySelector?.nativeElement) return;

    const element = this.mySelector.nativeElement;
    
    // Get HTML content
    const htmlContent = element.innerHTML;

    // Get computed styles
    const computedStyles = window.getComputedStyle(element);
    
    // Create a deep clone of the element with styles
    const clonedElement = element.cloneNode(true) as HTMLElement;
    
    // Get all child elements
    const allElements = [clonedElement, ...Array.from(clonedElement.getElementsByTagName('*'))];

    // Apply computed styles to each element
    allElements.forEach(el => {
      const computedStyle = window.getComputedStyle(el as Element);
      let inlineStyles = '';

      // Convert computed styles to inline styles
      Array.from(computedStyle).forEach(property => {
        inlineStyles += `${property}: ${computedStyle.getPropertyValue(property)}; `;
      });

      (el as HTMLElement).style.cssText = inlineStyles;
    });

    // Get the final HTML with inline styles
    const fullContent = clonedElement.outerHTML;

    // Optional: Get specific style properties
    const specificStyles = {
      width: computedStyles.width,
      height: computedStyles.height,
      backgroundColor: computedStyles.backgroundColor,
      // Add more properties as needed
    };

    console.log('HTML Content:', htmlContent);
    console.log('Computed Styles:', specificStyles);
    console.log('Full Content with Styles:', fullContent);

    return {
      htmlContent,
      computedStyles: specificStyles,
      fullContent
    };
  }

  // Helper method to get styles from pseudo-elements
  getPseudoElementStyles(element: Element, pseudo: string) {
    return window.getComputedStyle(element, pseudo);
  }

  // Helper method to convert styles to string
  styleMapToString(styleMap: CSSStyleDeclaration): string {
    let styleString = '';
    for (let i = 0; i < styleMap.length; i++) {
      const property = styleMap[i];
      const value = styleMap.getPropertyValue(property);
      if (value) {
        styleString += `${property}: ${value}; `;
      }
    }
    return styleString;
  }
}