angular - 角度样式不适用于 renderer2 创建的元素

Question

内部应用组件

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
//I'm using renderer2 inside component not directory

export class AppComponent {
  @ViewChild('div1') el : ElementRef;
  showComment = false;
  constructor(private renderer: Renderer2){}
  ngOnInit() {}

  ngAfterViewInit() {
    const div = this.renderer.createElement('div');
    div.innerHTML=`<p id='comment' #comment1 *ngIf='showComment'>Test<p>`;
    this.renderer.appendChild(this.el.nativeElement, div);
  }
}

样式不适用于在“app.component.css”中使用 renderer2 创建的“div”和“p”标签。

我什至看不到使用 viewchild，ngif 也不起作用，这不属于应用程序组件。

我如何在同一个组件中应用样式** 除了全局添加样式，我怎样才能工作。我是*ngifAngular 新手，请帮忙。

Answer 1

这似乎是 ViewEncapsulation 问题。ViewEncapsulation.None 可能会解决它：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  ...
}