Demo

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时样式不起作用

1 个答案:

Demo