Question

我有一个组件页面和相应的样式表，但是component.scss中的类不适用于该页面。没有错误，我仍然想知道为什么吗？

这是我的product-detailpage.component.html

<div>
  <h1>Product Detail Page</h1>
</div>

这是.ts文件

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ProductdetailService} from '../productdetail.service';
@Component({
  selector: 'app-product-detailpage',
  templateUrl: './product-detailpage.component.html',
  styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {

  constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
    this.route.params.subscribe(params => console.log(params));
   }

  ngOnInit() {
  }

}

这是.scss文件

body{color:Red !important}
app-product-detailpage{
        h1{color:red !important}
}

不过，我注意到的一件事是，如果我对global styles.css进行了更改，它就可以正常工作。只是为了检查一下我将车身颜色更改为绿色即可。

我的角度应用程序配置为可与scss一起使用。可能是什么原因？有人可以建议吗？

Answer 1

您的SCSS对您的HTML文件 product-detailpage.component.html 不起作用。

原因是Angular将shadow DOM用于组件。这意味着在组件中找不到标签<body>和<app-product-detailpage>。

Answer 2

根据documentation，组件中指定的样式只能应用于其模板（不包括组件）。

这就是为什么您的样式无法在组件的style.scss中对组件起作用，而在全局样式表中仍能正常工作的原因。

一种实现方法是按照this documentation使用:host伪选择器，该伪选择器允许在放置组件的容器上添加样式。

文档说-

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Answer 3

由于Angular中的默认css封装为 Emulated (ViewEncapsulation.Emulated），因此Angular的渲染如下：

input[_ngcontent-c0] {
    border-radius: 5px;
}

因此，如果要将样式设置为当前的component，则可以使用 Native 选项。

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

它将呈现为：

input {
    border-radius: 5px;
}

但是最后我建议您使用 global scss文件定义<web component>的样式。

Angular 6不应用scss样式

3 个答案: