He componente Angular 2 llamado mi-comp:

<my-comp></my-comp>

¿Cómo hace uno para el estilo de la acogida de los elementos de este componente Angular 2?

En Polímero, tendría Que usar «:host» selector. Lo he probado en Angular 2. Pero no funciona.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

También he probado a utilizar el componente selector:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

Ambos enfoques parecen no funcionar.

Gracias.

  • Está usted seguro de que no se aplica el estilo? He hecho un proyecto básico y hizo exactamente eso, y funcionó. Me he fijado my-selector { color : red} en mi css y funciona bien.
  • Como de la beta 7, la :host selector está trabajando para mí.
  • Angular de 2 Componentes estilos

6 Comentarios

  1. 267

    No fue un error, pero fue resuelto en el ínterin. :host { } funciona bien ahora.

    También se admiten

    • :host(selector) { ... } para selector para que coincidan con los atributos de las clases, … en el elemento host
    • :host-context(selector) { ... } para selector para que coincida con los elementos, clases, …en componentes padre

    • selector /deep/selector (alias selector >>> selector no trabajar con SASS) para los estilos para que coincida través de los límites del elemento

      • ACTUALIZACIÓN: SASS es dejar de /deep/.

        Angular (TS y Dart) añadido ::ng-deep como un reemplazo de la que también es compatible con SASS.

      • UPDATE2: ::slotted
        ::slotted ahora es compatible con todos los navegadores y puede ser utilizado con `ViewEncapsulation.ShadowDom

        https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

    Ver también La carga externa de estilo css en Angular de 2 Componentes

    /deep/ y >>> son no se ven afectados por el mismo selector de combinadores que en Chrome, que están en desuso.

    Angular emula (vuelve a escribir), y por tanto no depende de navegadores compatibles con ellos.

    Esta es también la razón por la /deep/ y >>> no funcionan con ViewEncapsulation.Native que permite a los nativos de sombra DOM y depende de la compatibilidad del navegador.

    • @Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
    • usted puede elaborar más? Esto es puro CSS, ¿cómo puede ser incompatible con CSS y a sí mismo?
    • A menos que me he perdido algún cambio importante en la CSS, /profundo/ y >>> no son CSS.
    • Ellos están en desuso, pero que doesm importa. Ellos son emulados por Angulares (reescrito), por lo que sólo funcionan con ViewEncapsularion.Emulated (por defecto), pero no con Native.
    • En Angular 2.4.7 soy capaz de conseguir :host { p { font-size: 80%; } } para trabajar en un …componente.archivo css. Tan pronto como yo la use con styles: [:host { p { font-size: 80%; } }] es que ya no funciona. Muy extraño.
    • Te perdiste la cita styles: [":host { p { font-size: 80%; } }"]
    • ¿La solución es trabajar con «styleUrls»?
    • No hay ninguna diferencia en el comportamiento entre styles y styleUrls
    • Estoy tratando de usar este estilo de un componente como :host(.la mía) { color: green; } pero dosent parece que funciona , cuando pongo esto en el componente padre ccs archivo
    • ¿Qué es «esto» que se pone en el componente de los padres? Cuando se agrega class="mine" en el propio componente, se debe hacer que el color de la componente verde donde agregar en. Si agrega class="mine" a un padre o antepasado componente, es necesario utilizar :host-context(.mine) { color: green; . Si agrega :host(.mine) { color: green; } en el componente de los padres, entonces usted necesita para agregar class="mine" en el componente de los padres y el estilo también la dirección de la componente de los padres solamente.
    • ¿cómo podemos acceder componente variable dentro de acogida? Si quiero decidir el color de fondo de forma dinámica? ‘:host { background-color: este.bgColor; }’
    • ¿Qué es el «componente variable dentro de host»?
    • En general, tengo una variable dentro de mi clase «bgColorValue=rojo» y quiero establecer este valor :host {background-color: este.bgColorValue}
    • No se puede acceder a las variables del componente de CSS. Usted puede utilizar [style.backgroundColor]="bgColorValue" sobre los elementos en su plantilla o agregar @HostBinding('style.backgroundColor') antes de su bgColorValue variable
    • gracias por la respuesta. habiendo dicho eso, hay una manera de conseguir css desde el backend (100 clases css)? como en liferay? Uno de mis componente debe proporcionar un cuadro de texto para que el usuario pueda añadir código css y se debe reflejar en el componente.
    • lo siento, no creo que pueda ayudarte aquí. Tal vez sería mejor crear una nueva pregunta con más detalles.
    • podría usted por favor responda a este stackoverflow.com/q/49530499/2742156

  2. 33

    He encontrado una solución de cómo el estilo sólo el elemento del componente. No he encontrado ninguna documentación de cómo funciona, pero usted puede poner los valores de atributos en el componente de la directiva, según el ‘host’ propiedad como esta:

    @Component({
        ...
        styles: [`
          :host {
            'style': 'display: table; height: 100%',
            'class': 'myClass'
          }`
    })
    export class MyComponent
    {
        constructor() {}
    
        //Also you can use @HostBinding decorator
        @HostBinding('style.background-color') public color: string = 'lime';
        @HostBinding('class.highlighted') public highlighted: boolean = true;
    }

    ACTUALIZACIÓN:
    Como Günter Zöchbauer se mencionó, no fue un error, y ahora puedes cambiar el estilo del elemento host incluso en el archivo css, como este:

    :host{ ... }
    • Me gusta esta mejor que la creación de un maniquí .elemento raíz, pero no me gusta que establece estos estilos en línea (forzando un !important a reemplazar). Tiene que haber una mejor waayy :\
    • no, el estilo a través de host{} en un stylesUrl archivo no funciona. necesidades :host.
    • ¿cómo podemos acceder componente variable dentro de acogida? Si quiero decidir el color de fondo de forma dinámica? ‘:host { background-color: este.bgColor; }’
    • Hola, usted puede utilizar HostBinding derorator. Ejemplo será: @HostBinding('style.background-color') private color = 'lime'; Google va a encontrar muchos ejemplos y artículos.
  3. 11

    Retirar este problema. Yo creo que el error será resuelto cuando nueva plantilla de precompilación lógica será implementado. Por ahora creo que lo mejor que puedes hacer es ajustar su plantilla en <div class="root"> y el estilo de este div:

    @Component({ ... })
    @View({
      template: `
        <div class="root">
          <h2>Hello Angular2!</h2>
          <p>here is your template</p>
        </div>
      `,
      styles: [`
        .root {
          background: blue;
        }
      `],
       ...
    })
    class SomeComponent {}

    Ver este plunker

  4. 9

    En su Componente puede agregar .la clase a su elemento host si usted tiene algunos de los estilos que desea aplicar.

    export class MyComponent{
         @HostBinding('class') classes = 'classA classB';
  5. 5

    Para todos los que buscan el estilo de los elementos secundarios de un :host aquí es un ejemplo de cómo utilizar ::ng-deep

    :host::ng-deep <child element>

    e.g :host::ng-deep span { color: red; }

    Como otros dijeron /deep/ está en desuso

  6. 3

    Tratar la :host > /profundo/:

    Agregue lo siguiente a los padres.componente.menos de archivo

    :host {
        /deep/ app-child-component {
           //your child style
        }
    }

    Reemplazar la app-niño-componente de su hijo selector de

    • Lo que si desea una hoja de estilo como bootstrap allí en lugar de un solo estilo?

Dejar respuesta

Please enter your comment!
Please enter your name here