在 Angular 中用 styles 获取 HTML 内容

Question

I have an application created using Angular. I need to get html of template of some big component but with styles that used there for classes. How can I do that in angular? Currently I'm trying to achieve this with getting innerHTML :

const myTemplate = document.getElementById("someWrapperId");
const content = myContent.innerHTML;

It doesn't return styled html. I also tried with setting encapsulation: ViewEncapsulation.None - it also doesn't help in my case. Styles are set in component.css file and not inline.

Answer 1

Hi I think you can use @ViewChild and ElementRef to get the HTML content style. I have a sample code below =>
HTML:

<div  #infoDiv class='col-md-2' style='color: blue;width:152px'>INFO DIV</div>
<br>
Your Color:: {{styleColor}}
<br>
Your Width:: {{styleWidth}}

TS:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  styleColor:any='';
  styleWidth:any='';
  @ViewChild('infoDiv') infoDivRef: ElementRef;
  ngAfterViewInit(): void {
    if (this.infoDivRef.nativeElement) {
      console.log(this.infoDivRef.nativeElement.style.color);
      this.styleColor=this.infoDivRef.nativeElement.style.color;
       this.styleWidth=this.infoDivRef.nativeElement.style.width;
    }
  }
}

NOTE: Code is also available in stackblitz. Please check the LINK DEMO link .