在Angular 6中,要阻止一个组件从另一个组件获取CSS,可以通过以下几种方式实现:
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css'],
encapsulation: ViewEncapsulation.None
})
export class Component1Component {
// Component1的代码
}
<!-- component2.component.css -->
.component2-style {
/* Component2的样式 */
}
<!-- component1.component.html -->
<app-component2 class="component2-style"></app-component2>
/* styles.css */
.global-style {
/* 全局样式 */
}
/* component1.component.html */
<div class="global-style">
<!-- Component1的内容 -->
</div>
需要注意的是,以上方法仅适用于在Angular应用程序内部阻止组件之间获取CSS。如果你想要阻止从外部引入的CSS文件影响到组件,可以使用Shadow DOM或CSS Modules等技术来实现。
领取专属 10元无门槛券
手把手带您无忧上云