Angular 4 媒体查询打印指令答案

【问题标题】：Angular 4 Directive for Media Query PrintAngular 4 媒体查询打印指令
【发布时间】：2018-01-10 08:53:23
【问题描述】：

尝试使用打印媒体查询创建一个隐藏元素的指令。在纯 CSS 中，它看起来像这样：

@media print {
  .no-print {
  display: none;
}

如何在使用 elementRef 的指令中应用它，这是我目前所拥有的：

constructor(el: ElementRef) {
    el.nativeElement.setAttribute('style',
    `@media print {
    display: none;
    }`
  );
}

【问题讨论】：

标签： css angular angular-directive

【解决方案1】：

可能是这样的：

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

【讨论】：