Angular 6 - 使用 ng-content 时样式不起作用

Question

我有一些代码，但在使用 <ng-content></ng-content>

时无法定位 css 时遇到问题

代码如下：

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 伪选择器来实现。

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

Angular 6 - 使用 ng-content 时样式不起作用

Angular 6 - Styles are not working when using ng-content

typescript

angular

angular6

Demo