it-swarm.com.ru

Стиль Angular 2 не применяется к дочернему компоненту

Я пытаюсь применить стили к тегу дочернего компонента, но я не могу этого сделать. 

У меня есть дочерний компонент с тегом привязки. 

Хотя у меня есть стиль для тега привязки в родительском компоненте, он не применяется. Какое решение для этого?

Рабочий код: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

 <a href="https://www.google.com">Google</a>

В родительском компоненте я использую дочерний компонент и применяю стилизацию для этого дочернего компонента.

HTML-код:

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

Код CSS:

.container{
  font-family:sans-serif;
  font-size:18px;
  border: 1px solid black;
}
.test{
  width:50%;
  background-color:#f0f5f5;
}

.container:hover .test{
  background-color:#e6ffe6;
}
.container:hover .test:hover{
  background-color:#ffffe6;
}
.container .test a {
    color:   red ;
}
.container .test a:hover {
    color:green;
}
27
Varun

Это потому, что по умолчанию компоненты имеют инкапсуляцию вида (shadow dom). Чтобы отключить это поведение, вы можете использовать атрибут encapsulation, как описано ниже:

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

Смотрите этот plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview .

58
Thierry Templier

При использовании свойства styleUrls стили local для одного компонента, а не для его дочерних элементов. Поэтому я сделал два изменения: 1) Переместил styleUrls в компонент testapp . 2) Переместил div в компонент testapp.

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}
2
DeborahK

РЕДАКТИРОВАНИЕ: Это должно решить:

В css дочернего класса напишите ниже код

:Host.parentclass childclass{

}

Родительский класс является непосредственным родителем ребенка. childclass - это класс, применяемый к дочернему компоненту.

0
RPD