Angular 2: Como estilizar o elemento host do componente?

189

Eu tenho componente no Angular 2 chamado my-comp:

<my-comp></my-comp>

Como um estilo é o elemento host desse componente no Angular 2?

No polímero, você usaria o seletor ": host". Eu tentei no Angular 2. Mas não funciona.

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

Eu também tentei usar o componente como seletor:

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

Ambas as abordagens parecem não funcionar.

Obrigado.

Ravi Teja Gudapati
fonte
2
Tem certeza de que o estilo não é aplicado? Eu fiz um projeto básico e fiz exatamente isso e funcionou. Eu configurei my-selector { color : red}no meu css e funciona bem.
Pacane 29/09/15
1
A partir do beta 7, o seletor: host está funcionando para mim.
Jon Swanson

Respostas:

285

Houve um erro, mas foi corrigido enquanto isso. :host { }funciona bem agora.

Também são suportados

  • :host(selector) { ... }para selectorcorresponder atributos, classes, ... no elemento host
  • :host-context(selector) { ... }para selectorcombinar elementos, classes, ... nos componentes pai

  • selector /deep/ selector(o alias selector >>> selectornão funciona com o SASS) para que os estilos correspondam aos limites dos elementos

    • UPDATE: SASS está obsoleto /deep/.
      Angular (TS e Dart) adicionado ::ng-deepcomo um substituto que também é compatível com o SASS.

    • UPDATE2: ::slotted ::slotted agora é suportado por todos os novos navegadores e pode ser usado com o `ViewEncapsulation.ShadowDom
      https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Consulte também Carregar estilo css externo no componente Angular 2

/deep/e não>>> são afetados pelos mesmos combinadores de seletor que no Chrome que foram preteridos.
Angular os emula (reescreve) e, portanto, não depende dos navegadores que os suportam.

É também por isso /deep/e >>>não fazer o trabalho com ViewEncapsulation.Nativeo que permite DOM sombra nativa e depende do apoio browser.

Günter Zöchbauer
fonte
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
Günter Zöchbauer 18/04
@ OndraŽižka você pode elaborar mais? Isso é CSS puro, como pode ser inconsistente com o CSS e ele próprio?
Günter Zöchbauer 02/02
A menos que eu tenha perdido alguma mudança importante no CSS, / deep / e >>> não são CSS.
Ondra Žižka
Eles estão obsoletos, mas isso não importa. Eles são emulados por Angular (reescritos), portanto, eles só funcionam com ViewEncapsularion.Emulated(padrão), mas não com Native.
Günter Zöchbauer
No Angular 2.4.7, posso :host { p { font-size: 80%; } }trabalhar em um arquivo ... component.css. Assim que eu tento usá-lo, styles: [:host { p { font-size: 80%; } }]ele não funciona mais. Muito estranho.
Martin Martin
39

Eu encontrei uma solução como estilizar apenas o elemento componente. Não encontrei nenhuma documentação sobre como funciona, mas você pode colocar valores de atributos na diretiva component, na propriedade '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;
}

ATUALIZAÇÃO: Como Günter Zöchbauer mencionou, houve um erro e agora você pode estilizar o elemento host mesmo no arquivo css, assim:

:host{ ... }
prespic
fonte
1
Eu gosto disso melhor do que criar um elemento .root fictício, mas não gosto que ele defina esses estilos como inline (forçando !importanta substituição). Tem que haver uma maneira melhor: \
Scrimothy
4
não, o estilo via host{}em um stylesUrlarquivo não funciona. necessidades :host.
phil294
como podemos acessar a variável componente dentro do host? Se eu quiser decidir a cor de fundo dinamicamente? ': host {cor de fundo: this.bgColor; } '
Pratap AK 28/03
@ PratapA.K Olá, você pode usar o derorator HostBinding. Seu exemplo será: o @HostBinding('style.background-color') private color = 'lime'; Google encontrará muitos exemplos e artigos.
prespic 28/03
11

Confira este problema . Eu acho que o bug será resolvido quando a nova lógica de pré-compilação do modelo for implementada. Por enquanto, acho que o melhor que você pode fazer é envolver seu modelo <div class="root">e estilizar isso div:

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

Veja este plunker

alexpods
fonte
9

No seu Component, você pode adicionar .class ao seu elemento host, se tiver alguns estilos gerais que deseja aplicar.

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

Para quem deseja estilizar elementos filho de um :hostaqui é um exemplo de como usar::ng-deep

:host::ng-deep <child element>

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

Como outros disseram que /deep/está obsoleto

Petros Kyriakou
fonte
4

Experimente o: host> / deep /:

Adicione o seguinte ao arquivo parent.component.less

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

Substitua o componente filho do aplicativo pelo seletor filho

abahet
fonte
E se você quiser uma folha de estilo como o bootstrap, em vez de um único estilo?
Aditya Vikas Devarapalli