如何解决在 shadow-root 中插入组件时不应用角度样式
在我的应用程序中,我使用显示在 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 中?
非常感谢您的帮助!
解决方法
也许你需要将视图封装设置为无
@Component({
selector: 'test',templateUrl: './test.component.html',styleUrls: ['./test.component.less'],changeDetection: ChangeDetectionStrategy.OnPush,encapsulation: ViewEncapsulation.None
})
希望对您有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。