css - the - dart web example

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

Question

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.

Answer 1

Echa un vistazo a este problema . 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 en <div class="root"> y div estilo a 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 saqueador

Answer 2

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

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

Answer 3

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{ ... }

Answer 4

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

También se admiten

• :host(selector) { ... } para que el selector coincida con atributos, clases, ... en el elemento host

• :host-context(selector) { ... } para que el selector coincida con elementos, clases, ... en componentes principales

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

  • ACTUALIZACIÓN: SASS es obsoleto /deep/ .
    Angular (TS y Dart) agregado ::ng-deep como reemplazo que también es compatible con SASS.

  • ACTUALIZACIÓN2: ::slotted slotted ::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 >>> no se ven afectados por los mismos combinadores selectores 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/ que /deep/ y >>> no funcionan con ViewEncapsulation.Native que habilita DOM nativo nativo y depende del soporte del navegador.

Answer 5

Para cualquiera que busque diseñar elementos secundarios de a :host aquí hay un ejemplo de cómo usar ::ng-deep

:host::ng-deep <child element>

por ejemplo :host::ng-deep span { color: red; } :host::ng-deep span { color: red; }

Como otros dijeron /deep/ está en desuso

Answer 6

Pruebe el: host> / deep /:

Agregue lo siguiente al archivo parent.component.less

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

Reemplace el componente hijo de la aplicación por su selector hijo