為什么從服務的 RendererFactory2 生成的組件沒有從組件 CSS 中獲取預定義樣式？

Question

我正在嘗試使用服務從服務中渲染 html，使用 RendererFactory2，但是該元素沒有從組件 CSS 中獲取給定類名的 CSS 樣式。

在我嘗試從它正在工作的服務中生成模板之前，因為它是從 component.ts 創建的

這是將在其中生成模板的 HTML 表單：

<form #formInputEl class="edit-area">
  </form>

這是將為生成的模板設置樣式的CSS ：

.edit-area{
  width: 100%;
  height: 600px;
  min-height: 600px;
  min-width: 100%;
}

.edit-area .outer-text-wraper{
  position:relative;
  height:auto;
  width: auto;
 
}

.edit-area .outer-text-wraper .close-btn{
  top:0;
  left:95%;
  background-color: salmon;
  border-style:none;
  border-radius: 4px;
  position:absolute;
  width:16px;
  height:16px;
  font-size: 16px;
  outline:none;
  visibility:hidden;
}
.edit-area .outer-text-wraper:hover .close-btn{
  visibility:visible;
}
.edit-area .outer-text-wraper .close-btn:active{
  background-color:rgb(255,80,80);
}
.edit-area .outer-text-wraper .close-btn:active{
  background-color:rgb(255,80,80);
}
.edit-area .outer-text-wraper .inner-text-wraper{
  padding:24px;
  height:auto;
  width: auto;
  box-shadow: 1px 2px 2px 1px #eee inset;
  border: 1px solid #ddd;
  border-radius: 2px;

  box-sizing: border-box;
 
}

這是將生成模板的服務

export class TextAreaService  {
  
    private renderer : Renderer2

    constructor(rendererFactory: RendererFactory2) {
        this.renderer = rendererFactory.createRenderer(null, null);
    }

    public createSimpleDiv(parent){
      
    let newTextEl :HTMLDivElement = this.renderer.createElement('div');
    
    this.renderer.addClass(newTextEl,'outer-text-wraper');
    this.renderer.appendChild(parent,newTextEl);
    //close Button child of newTextEl
    let clsDivEl : HTMLButtonElement =  this.renderer.createElement('button');
    this.renderer.addClass(clsDivEl,'close-btn');
    this.renderer.listen(clsDivEl,'click',() => {
      this.renderer.removeChild(parent,newTextEl);
    });
    this.renderer.appendChild(newTextEl,clsDivEl);
    
    //input textfield sibling from button
    let innerTextWraper : HTMLDivElement = this.renderer.createElement('div');
    this.renderer.addClass(innerTextWraper,'inner-text-wraper');
    this.renderer.setAttribute(innerTextWraper,'contenteditable','true');
    this.renderer.appendChild(newTextEl,innerTextWraper);

  }
}

這是組件

export class AppComponent implements OnInit{

  @ViewChild('formInputEl',{static: false}) inputForm : ElementRef;
  inputFieldText = new FormControl('');
  constructor(private textArea : TextAreaService){}

  ngOnInit(){}
  generateTextArea(){
    this.textArea.createSimpleDiv(this.inputForm.nativeElement);
  }
}

當生成來自服務的模板時，它應該按照我在 CSS 中預定義的方式設置樣式，但它是在沒有樣式的情況下呈現的。

Answer 1

這是因為通過Renderer2注入的代碼不會被視為 Angular 組件代碼，而是被視為純 html，因此它不會受到組件 CSS 中編寫的 CSS 的影響，因此為了這樣做，請在組件上使用ViewEncapsulation.NONE ，例如：

@Component({
  ...
  encapsulation: ViewEncapsulation.NONE
})

閱讀更多關於ViewEncapsulation