Angular 2: ¿Cómo diseñar el elemento host del componente?

189

Tengo un componente en Angular 2 llamado my-comp:

<my-comp></my-comp>

¿Cómo se estiliza el elemento host de este componente en Angular 2?

En Polymer, usaría el selector ": host". Lo probé en Angular 2. Pero no funciona.

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

También intenté usar el componente como selector:

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

Ambos enfoques no parecen funcionar.

Gracias.

Ravi Teja Gudapati
fuente
2
¿Estás seguro de que el estilo no se aplica? Hice un proyecto básico e hice exactamente eso y funcionó. He configurado my-selector { color : red}mi CSS y funciona bien.
Pacane
1
A partir de la versión beta 7, el selector de host funciona para mí.
Jon Swanson

Respuestas:

285

Hubo un error, pero se corrigió mientras tanto. :host { }funciona bien ahora.

También se admiten

  • :host(selector) { ... }para selectorhacer coincidir atributos, clases, ... en el elemento host
  • :host-context(selector) { ... }para selectorunir elementos, clases, ... en componentes principales

  • selector /deep/ selector(el alias selector >>> selectorno funciona con SASS) para que los estilos coincidan a través de los límites de los elementos

    • ACTUALIZACIÓN: SASS está en desuso /deep/.
      Angular (TS y Dart) agregado ::ng-deepcomo reemplazo que también es compatible con SASS.

    • ACTUALIZACIÓN2: ::slotted ::slotted ahora es compatible con todos los navegadores nuevos y se puede usar con `ViewEncapsulation.ShadowDom
      https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Consulte también Cargar estilo css externo en el componente Angular 2

/deep/y >>>se no se ve afectado por los mismos combinadores selector que en Chrome, que están en desuso.
Angular los emula (reescribe) y, por lo tanto, no depende de los navegadores que los admitan.

Esta es también la razón /deep/y >>>no funciona con lo ViewEncapsulation.Nativeque permite el DOM nativo nativo y depende del soporte del navegador.

Günter Zöchbauer
fuente
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
Günter Zöchbauer
@ OndraŽižka, ¿puedes elaborar más? Esto es puro CSS, ¿cómo puede ser inconsistente con CSS y en sí mismo?
Günter Zöchbauer
A menos que me haya perdido algún cambio importante en CSS, / deep / y >>> no son CSS.
Ondra Žižka
Están en desuso, pero eso no importa. Son emulados por Angular (reescritos), por lo tanto, solo funcionan con ViewEncapsularion.Emulated(predeterminado) pero no con Native.
Günter Zöchbauer
En Angular 2.4.7 puedo :host { p { font-size: 80%; } }trabajar en un archivo ... component.css. Tan pronto como trato de usarlo styles: [:host { p { font-size: 80%; } }], ya no funciona. Muy extraño.
Martin
39

He encontrado una solución para diseñar solo el elemento componente. No he encontrado ninguna documentación sobre cómo funciona, pero puede poner valores de atributos en la directiva del componente, bajo la propiedad 'host' 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 mencionó Günter Zöchbauer, hubo un error, y ahora puede diseñar el elemento host incluso en el archivo css, de esta manera:

:host{ ... }
prespic
fuente
1
Me gusta más que crear un elemento ficticio .root, pero no me gusta que establezca estos estilos como en línea (obligando !importanta anular). Tiene que haber una mejor manera: \
Scrimothy
44
no, el estilo host{}en un stylesUrlarchivo no funciona. las necesidades :host.
phil294
¿Cómo podemos acceder a la variable componente dentro del host? Si quiero decidir el color de fondo dinámicamente? ': host {color de fondo: this.bgColor; } '
Pratap AK
@ PratapA.K Hola, puede usar el derorator HostBinding. @HostBinding('style.background-color') private color = 'lime'; Su ejemplo será: Google le encontrará muchos ejemplos y artículos.
prespic
11

Mira este tema . Creo que el error se resolverá cuando se implemente la nueva lógica de precompilación de plantillas . Por ahora, creo que lo mejor que puedes hacer es envolver tu plantilla <div class="root">y diseñar esto 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 saqueador

alexpods
fuente
9

En su Componente, puede agregar .class a su elemento host si desea aplicar algunos estilos generales.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
Xquick
fuente
6

Para cualquiera que quiera diseñar elementos secundarios de un :hostaquí, hay un ejemplo de cómo usar::ng-deep

:host::ng-deep <child element>

p.ej :host::ng-deep span { color: red; }

Como otros dijeron /deep/está en desuso

Petros Kyriakou
fuente
4

Pruebe el: host> / deep /:

Agregue lo siguiente al archivo parent.component.less

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

Reemplace el componente app-child por su selector child

abahet
fuente
¿Qué sucede si desea una hoja de estilo como bootstrap allí en lugar de un solo estilo?
Aditya Vikas Devarapalli