大佬教程收集整理的这篇文章主要介绍了动态插入到 DOM 后，样式不会应用于 HTML 元素 - Angular，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想添加一个“i”元素作为 HTMLdivelement 的子元素 但样式不适用于新插入的“i”元素。@H_874_3@
如何确保对新添加的“i”元素应用相同的样式？ 我想应用我在 sCSS 文件中为新元素设置的样式。 （当我在 .ts 文件中插入新元素时，我可以使用 Js(TS) 设置相同的样式，但我打算使用 sCSS/CSS 样式，有什么方法可以将 sCSS/CSS 样式用于新添加的元素？）@H_874_3@
住宿视图数据.HTML@H_874_3@
@H_301_6@<div class="star-raTing" #starraTing>
<i class="bi bi-star-fill"></i> <!-- styles are applIEd to this element successfully -->
</div>
住宿-视图-data.component.sCSS@H_874_3@
@H_301_6@i{
Font-size: 1.6rem;
padding: 0 0.25rem ;
color: #ffbe0f;
}
accommodation-vIEw-data.component.ts@H_874_3@
@H_301_6@import {AfterVIEwInit,Component,ElementRef,OnInit,VIEwChilD} from '@angular/core';
@Component({
SELEctor: 'app-accommodation-vIEw-data',templateUrl: './accommodation-vIEw-data.component.HTML',styleUrls: ['./accommodation-vIEw-data.component.sCSS']
})
export class AccommodationVIEwDataComponent implements OnInit,AfterVIEwInit {
@VIEwChild('starraTing')
starraTingElem!: ElementRef;
constructor() { }
ngOnInit(): voID {
}
ngAfterVIEwInit(): voID {
/* When I append the the new element to the DOM,* the styles that I have set in the sCSS file,are not applIEd for the new element */
const starIconElement = document.createElement('i');
starIconElement.classList.add('bi');
starIconElement.classList.add('bi-star-fill');
(this.starraTingElem.nativeElement as HTMLdivelement).append(starIconElement);
}
}
这是一种正常行为，当您编写集成在 styleUrls 中的样式时，每个类都会重新设计为特定于组件，即样式范围（请注意下面屏幕截图中的 I[ng-content-lep-c52]）。 @H_874_3@
因此，不建议像您那样在 dom 中添加元素，而是更喜欢通过 ngIf 或此处使用 ngFor 来切换它，否则您将很难尝试使其动态并使用组件模型。@H_874_3@
就像您在此屏幕截图中看到的那样，第一个元素与作用域样式正确匹配，而新元素则没有。@H_874_3@
不推荐和弃用：要绕过这一点，您可以使用 ::ng-deep 伪类使样式全局化，从而被作用域样式覆盖，如您在此屏幕截图中所见从此stackblitz。@H_874_3@
您可以在 angular here
中找到有关样式的更多信息
以上是大佬教程为你收集整理的动态插入到 DOM 后，样式不会应用于 HTML 元素 - Angular全部内容，希望文章能够帮你解决动态插入到 DOM 后，样式不会应用于 HTML 元素 - Angular所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
@H_