Estoy usando Angular 2 y D3.js. Quiero mostrar un rectángulo rojo.
Solo funciona si pongo estilos en el archivo style.css . Mira este plunkr
Cuando pongo mis estilos en los styles: [] , no funciona. Mira este plunkr
¿Cómo dejar que funcione cuando uso los styles: [] ? Gracias
ACTUALIZACIÓN: @micronyks proporciona una solución, pero hace que los estilos en el componente sean globales, básicamente no hay diferencia con escribir en el archivo style.css . En este plunkr , muestra que el estilo en un componente anulará los estilos de otro componente, por lo que no puede mostrar rectángulos verdes y rojos.
ACTUALIZACIÓN 2: ¡La manera de @Günter resuelve perfectamente este problema! Solo un recordatorio, para el estilo de Günter: necesita al menos Angular beta 10. (Mis otros plunkrs usan Angular beta 8) La demostración de trabajo para un rectángulo verde y uno rojo usando Angular beta 12 está aquí .
import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], styles: [` /*this does not work*/ .bar { fill: red; } `], template: ` <div> <svg class="chart"></svg> </div> `, directives: [] }) export class App { constructor() {} ngOnInit() { this.draw(); } draw() { let data = [{name: 'A', value: 1}]; let width = 400, height = 200; let x = d3.scale.ordinal().rangeRoundBands([0, width]); let y = d3.scale.linear().range([height, 0]); let chart = d3.select(".chart") .attr("width", width) .attr("height", height) .append("g"); x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.value; })]); chart.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.name); }) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }) .attr("width", x.rangeBand()); } }Actualizar
Angular y SASS acordaron admitir ::ng-deep (en lugar de >>> o /deep/ ) hace un tiempo hasta que ::slotted o lo que sea que se convierta en los estándares del navegador esté disponible en todos los navegadores.
ViewEncapsulation.Emulated (predeterminado)
Eso es por diseño. Angular agrega nombres de clase exclusivos para los componentes y reescribe los estilos agregados para que solo se apliquen a los componentes donde se agregaron.
D3 genera HTML dinámicamente sin el conocimiento de Angulars y Angular no puede aplicar las clases para hacer que los estilos se apliquen en el HTML generado.
Si agrega los estilos en el archivo HTML del punto de entrada, Angular tampoco reescribe los estilos y las clases auxiliares agregadas no surten efecto.
ViewEncapsulation.Ninguno
Con encapsulation: ViewEncapsulation.None Angular no hace esta reescritura, por lo tanto, el resultado es similar a agregar HTML a index.html .
"Perforación de sombras"
Alternativamente, puede usar los combinadores CSS de perforación de sombras recientemente introducidos >>> , /deep/ y ::shadow ( ::shadow simplemente se reemplaza por un y por lo tanto muy limitada). Ver también https://stackoverflow.com/a/36225709/217408 y Plunker
:host /deep/ div { color: red; }HABLAR CON DESCARO A
/deep/ funciona bien con SASS pero el alias >>> no.
Los combinadores de CSS que perforan las sombras están reescritos por Angular y no necesitan ser compatibles con los navegadores. Chrome los admitió durante un tiempo, pero están obsoletos, pero como se dijo, eso no importa, porque Angular los reescribe para usar su emulación de encapsulación.
ViewEncapsulation.Native
Angular no admite ninguna forma de diseñar dichos componentes desde el exterior. Solo si el navegador proporciona soporte como variables CSS, entonces se pueden usar.
ViewEncapsulation solucionará su problema.
import {Component,ViewEncapsulation} from 'angular2/core' @Component({ selector: 'my-app', encapsulation: ViewEncapsulation.None, providers: [], styles: [` .bar { fill: red; } `], template: ` <div> <svg class="chart"></svg> </div> `, directives: [] })Esto se debe a la encapsulación de vistas en Angular 2. De manera predeterminada, todo el HTML y CSS se transforma para que solo se aplique localmente. En otras palabras, si agrega este estilo en el CSS de su componente:
h2 { color: red; }Solo afectará a los elementos h2 dentro del componente , no a todos los elementos h2 en toda su aplicación. Puede leer más sobre este mecanismo en la documentación de Angular en View Encapsulation .
Angular transforma sus estilos, pero dado que el gráfico C3 aún no está dibujado, tampoco puede transformar HTML/SVG. Por eso, los estilos de los componentes no coincidirán con los elementos dentro del gráfico C3.
Las hojas de estilo externas no son transformadas por los mecanismos de encapsulación de vistas, por lo que efectivamente afectarán su gráfico C3 (y cualquier otro elemento).
Si está utilizando Angular CLI, agregar una hoja de estilo externa es realmente simple. Edite su archivo angular-cli.json y dentro de la matriz de styles de búsqueda de propiedades de apps . Agregue otra hoja de estilo aquí:
{ … "apps": [ { … "styles": [ "styles.scss", "c3.scss" // <---- add this or any other file ], } ], … } En caso de que no esté utilizando Angular CLI, debe haber alguna forma de agregar hojas de estilo externas. Probablemente la más simple sea agregar otro <link …> dentro de <head> en su archivo index.html .
ViewEncapsulation.None Su primera opción es: Cree un componente con el gráfico (y solo el gráfico) y desactive Ver encapsulación dentro de él. Es una buena idea hacerlo también por obedecer el Principio de Responsabilidad Única. Su gráfico, por diseño, debe estar encapsulado en un componente separado. Desactivar View Encapsulation es tan simple como agregar otra propiedad a su decorador @Component :
@Component({ … encapsulation: ViewEncapsulation.None })/deep/ selector CSS Si, por alguna razón, no quieres hacer eso, hay otra posibilidad. Puede intentar usar el selector /deep/ dentro de su CSS que fuerza los estilos hacia abajo en todas las vistas de componentes secundarios. Efectivamente, esto rompe la encapsulación y debería afectar su gráfico C3. Entonces, por ejemplo, puede hacer eso en el archivo CSS de su componente:
/deep/ .c3-chart-arc path { stroke: white; }De cualquier manera, recomiendo leer la documentación mencionada anteriormente sobre View Encapsulation en Angular 2 para comprender por qué sucede esto y cómo funciona. Se supone que esta función lo ayudará a escribir código, no a causar problemas :) Este artículo puede ayudarlo a comprender cómo funciona: Ver Encapsulación en blog.thoughtram.io