Angular 6 без применения стилей scss - PullRequest
Новая
       0

Angular 6 без применения стилей scss

0 голосов
/ 26 июня 2018

У меня есть страница компонента и соответствующая таблица стилей, однако классы в 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}
}

Однако я заметил одну вещь: если я внесу изменения в глобальный styles.css, он будет работать нормально.просто чтобы проверить, я изменил цвет тела на зеленый, и он работает.

Мое угловое приложение настроено для работы с scss.Что может быть причиной?может кто-нибудь предложить?

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Ваш SCSS не будет работать для вашего HTML-файла product-detailpage.component.html .

Причина в том, что Angular использует shadow DOM для компонентов.Это означает, что теги <body> и <app-product-detailpage> нигде не найдены в вашем компоненте.

0 голосов
/ 26 июня 2018

Поскольку инкапсуляция CSS по умолчанию в Angular равна 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>.

0 голосов
/ 26 июня 2018

Согласно документации , стиль, указанный в компоненте, может быть применен только к его шаблону, который исключает компонент.

По этой причине ваши стили не работают скомпонент из style.scss компонента, но работает нормально из глобальной таблицы стилей.

Один из способов сделать это - использовать :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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...