wake-up-neo.com

Winkel-2-Stil gilt nicht für untergeordnete Komponenten

Ich versuche, das Styling eines untergeordneten Komponententags anzuwenden, aber ich kann das nicht. 

Ich habe eine Kindkomponente mit Ankertag. 

Obwohl ich in der übergeordneten Komponente ein Styling für das Anker-Tag habe, gilt es nicht. Was ist die Lösung dafür?

Arbeitscode: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

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

In der übergeordneten Komponente verwende ich die untergeordnete Komponente und wende den Stil für diese untergeordnete Komponente an.

HTML Quelltext:

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

Css-Code:

.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;
}
htmlcsscss3angularangular2-template
27
Varun

Dies liegt daran, dass Komponenten standardmäßig eine Ansichtskapselung (Schattendom) haben. Um dieses Verhalten zu deaktivieren, können Sie das encapsulation-Attribut wie unten beschrieben nutzen:

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{

}

Siehe diesen Plan: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview .

58
Thierry Templier

Wenn Sie die styleUrls-Eigenschaft verwenden, befinden sich die Stile local für die eine Komponente, nicht für die untergeordneten Elemente. Also habe ich zwei Änderungen vorgenommen: 1) Die styleUrls wurden in die testapp-Komponente verschoben 2) Das div wurde in die testapp-Komponente verschoben.

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

BEARBEITET: Dies sollte lösen:

In der css der Kindklasse schreiben Sie den folgenden Code

:Host.parentclass childclass{

}

Die übergeordnete Klasse ist unmittelbar übergeordnetes Kind. childclass ist die auf die untergeordnete Komponente angewendete Klasse.

0
RPD