Angular 6 - стили не работают при использовании ng-контента

Question

У меня есть некоторый код, и у меня возникают проблемы с CSS, который не нацелен при использовании <ng-content></ng-content>

Вот код:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`

  app-embed {
    position:relative;
     width:100%;
     height:0;
     padding-bottom:33%;
  }

 app-embed iframe {
    width: 100vw;
    height: 56.25vw;
  }`]
})
export class AppEmbedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Как это исправить

Answer 1

Вы должны поместить стили содержимого в компонент, который их встраивает.Если вы хотите стилизовать тег AppEmbedComponent, вам нужно использовать селектор :host psuedo для этого.

embed.component.ts

@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`
    :host {
      position:relative;
      width:100%;
      height:0;
      padding-bottom:33%;
    }
  `],
})
export class AppEmbedComponent {}

other.component.ts

@Component({
  selector: 'app-other',
  template: `
    <app-embed>
      <iframe src="//www.google.com"></iframe>
    </app-embed>
  `,
  styles: [`
    iframe {
      width: 100vw;
      height: 56.25vw;
    }
  `],
})
export class AppOtherComponent {}

Демо