Question

我正在建立一个响应式网站，在那里我有一个导航按钮和侧栏导航。

如果点击它，我想添加一个基于类的X分辨率类A，并根据Y分辨率添加一个B类。

或者基于加载页面的分辨率来添加类或删除类。

Answer 1

您可以使用flex/layout。

例如，

<div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

如果屏幕尺寸很小（xs），它会将“{'font-size.px'：10，color：'blue'}”添加到样式

Answer 2

或者基于加载页面的分辨率来添加类或删除类。

这听起来像是媒体查询，完全不在Angular之外。

在Angular styleUrl中，指定一个包含适用于您的组件的媒体查询的工作表。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如果您正在谈论根据某些条件动态应用类，请查看NgClass。

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Answer 3

您可以使用指令

@Directive({
  selector: '[mq]'
})
class MediaQueryDirective {
  constructor(private zone:NgZone){}

  @HostBinding('class')
  classes:String;

  @Output()
  match = new EventEmitter();

  _mqReg = [];
  @Input() 
  set queries(value:any) {
    // unregister listeners from previous queries (not tested)
    if(this._mqReg.length) {
      this._mqReg.forEach(reg => reg.mq.removeListener(rer.handler));
      this._mqReg = [];
    }
    if(!value) {
      return;
    }
    // register listeners
    value.forEach((q) => {
      var mq = window.matchMedia(q.query);
      var handler = (e) => this.matches(e, q);
      this._mqReg.push({mq: mq.addListener(handler), handler: handler});
      console.log('mq', mq);
      // set the initial value - see also comment on queries in App
      if(mq.matches) {
        this.matches(null, q);
      }
    });
  }

  // on query match get class from query and set it on the host component
  matches(e, q) {
    console.log('matches', e);
    this.zone.run(() => {
      this.match.emit(q);
      this.classes = q.class;
    });
  }
}

Plunker example

Angular 2：如何根据分辨率条件添加类？

3 个答案: