在 shadow-root 中插入組件時不應用角度樣式

Question

在我的應用程序中，我使用顯示在 shadow-root 中的小部件，其中有一個帶有 id 的 div，我需要在其中插入我的組件。 喜歡：

<widget>
  #shadow-root (open)
    ....
    <div id='container'> // need to insert component here // </div>
    ...
</widget>

現在，在test.html我有簡單的

<div #test>It works!</div>

在小部件設置中，我可以將此<div id='container'></div>作為參數並將其傳遞給我的組件，因此test.ts看起來像

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Test implements OnInit, AfterViewInit {
  @Input() container: HTMLDivElement,
  @ViewChild('test', { static: true }) test: ElementRef;

  ngAfterViewInit(): void {
    const testElement = this.test.nativeElement;
    container.appendChild(testElement);
  }
}

問題是，當它插入到 shadow-root 時，它看不到test.component.less的樣式。 我試過:host{} :host ::ng-deep {}但它仍然不起作用。

所以我的問題是 - 有沒有辦法將test.component.less樣式應用到我的 .html 文件中，而它在 shadow-root 中？

將不勝感激任何幫助！

Answer 1

也許您需要將視圖封裝設置為無

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})

希望對你有幫助。