Angular 2 – estilo innerHTML

Estou recebendo pedaços de códigos HTML de chamadas HTTP. Eu coloco os blocos HTML em uma variável e insiro-o na minha página com [innerHTML], mas não consigo estilizar o bloco HTML inserido. Alguém tem alguma sugestão de como eu poderia conseguir isso?

@Component({selector: 'calendar', template: '
', providers:[HomeService], styles: [` h3 {color:red;} `})

O HTML que eu quero estilizar é o bloco contido na variável “calendar”.

atualização :: ng-deep

/deep/ foi preterido e substituído por ::ng-deep .

::ng-deep também já está marcado como obsoleto, mas ainda não há substituição disponível.

Quando ViewEncapsulation.Native é adequadamente suportado por todos os navegadores e suporta o estilo através de limites de sombra, ::ng-deep provavelmente será descontinuado.

original

Angular adiciona todos os tipos de classs CSS ao HTML que adiciona ao DOM para emular o encapsulamento sombra do CSS DOM para evitar estilos de input e saída de componentes. O Angular também reescreve o CSS que você adiciona para corresponder a essas classs adicionadas. Para HTML adicionado usando [innerHTML] essas classs não são adicionadas e o CSS reescrito não corresponde.

Como uma tentativa de solução alternativa

  • para CSS adicionado ao componente
 /* :host /deep/ mySelector { */ :host ::ng-deep mySelector { background-color: blue; } 
  • para CSS adicionado ao index.html
 /* body /deep/ mySelector { */ body ::ng-deep mySelector { background-color: green; } 

>>> (e o equivalente /deep/ mas /deep/ funciona melhor com o SASS) e ::shadow foram adicionados no 2.0.0-beta.10. Eles são semelhantes aos combinators shadow CSS do CSS (que são obsoletos) e só funcionam com encapsulation: ViewEncapsulation.Emulated que é o padrão em Angular2. Eles provavelmente também funcionam com ViewEncapsulation.None mas só são ignorados porque não são necessários. Esses combinadores são apenas uma solução intermediária até que resources mais avançados para estilo de componente cruzado sejam suportados.

Outra abordagem é usar

 @Component({ ... encapsulation: ViewEncapsulation.None, }) 

para todos os componentes que bloqueiam o seu CSS (depende de onde você adiciona o CSS e onde o HTML é que você deseja estilizar – podem ser todos os componentes do seu aplicativo)

Atualizar

Exemplo de Plunker