Question

我有一个Angular组件，它嵌入了Microsoft PowerBI报告。 powerbi-client从nativeElement获取ElementRef，并为嵌入式报告注入iframe。我想在iframe上设置边框（删除它）的样式。问题是Angular CLI封装了SCSS，但PowerBI库正在注入iframe，因此angular不知道它，因此没有元素的封装属性，例如_ngcontent-c8。

@Component({
  selector: 'app-report',
  template: `
  <div style="height:100%; width: 100%;" class="powerbi-frame" #frame></div>
  `,
  styleUrls: ['./report.component.scss']
})
export class ReportComponent implements OnInit {
  @Input() accessToken: string;
  @Input() embedUrl: string;
  @Input() id: string;
  @ViewChild('frame') frame: ElementRef;

  private _report: pbi.Report;
  private _reportloaded = false;
  constructor( @Inject('PowerBIClientService') private _client: pbi.service.Service) { }

  ngOnInit() {
    const config: pbi.IEmbedConfiguration = {
      accessToken: this.accessToken,
      tokenType: pbi.models.TokenType.Embed,
      embedUrl: this.embedUrl,
      type: 'report',
      id: this.id,
      settings: {
        filterPaneEnabled: false
      }
    };

    this._report = this._client.embed(this.frame.nativeElement, config) as pbi.Report;

    this._report.on('loaded', ev => this._reportloaded = true);
  }
}

report.component.scss

.powerbi-frame iframe {
  border-width: 0px;
  border-style: none;
}

我正在寻找一种方法来做：

.powerbi-frame :no-encapsulation(iframe) {
  border-width: 0px;
  border-style: none;
}

哪个应该产生以下内容：

.powerbi-frame[_nghost-c8] iframe { <-- note no scoping on iframe selector
  border-width: 0px; 
  border-style: none; 
}

我知道我可以将这些规则放在我的主要styles.scss中，但这看起来像是一种黑客攻击。任何人都可以指向一个更正确的方法来实现角度组件内的无结构元素的样式吗？

Answer 1

您正在寻找的是ViewEncapsulation。如果您不想要样式封装，请将以下内容添加到@Component定义中：

@Component({
  selector: 'app-report',
  template: `
  <div style="height:100%; width: 100%;" class="powerbi-frame" #frame></div>
  `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./report.component.scss']
})

组件内的Angular 5样式元素没有范围

1 个答案: