Question

我有这个代码 app.component.ts

ngOnInit() {

      let width600 = this.commonService.width600();
      let width380_768 = this.commonService.width380_768();
      let width768 = this.commonService.width768();
      let width992 = this.commonService.width992();
      let width1200 = this.commonService.width1200();

  function handler(mediaQueryList) {
     if (width380_768.matches) {
        this.maxWidth = 200;
     } 
     if (width768.matches) {
        this.maxWidth = 500;

     } 
     if (width992.matches) {
        this.maxWidth = 800;
     } 
     if (width1200.matches) {
        this.maxWidth = 1000;
     } 
  }

 window.matchMedia('(max-width: 767px), (min-width: 768px) and (max-width: 991px), (min-width: 1200px)').addListener(handler);

}

当屏幕宽度发生变化时，会触发其中一个限制，如果，并this.maxWidth被替换为另一个值。

此代码 app.component.html

<div class="content" [style.maxWidth.px]="maxWidth">
</div>

虽然更改了maxWidth但它不起作用。我认为它不会更新DOM元素为什么它不起作用。我尝试用（点击）完成所有工作。

Answer 1

您可以使用ChangeDetectionRef检测更改

import { ChangeDetectorRef } from '@angular/core';

export class AppComponent {
  maxWidth: any = 900;
  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
    window.matchMedia('(max-width: 767px), (min-width: 768px) and (max-width: 991px), (min-width: 1200px)').addListener(this.handler.bind(this));
  }

  handler(mediaQueryList) {
    this.maxWidth = 200;
    this.cd.detectChanges();
  }
}

<强> Plunker Example

或在angular2区域内运行你的处理程序，如：

import { Component, NgZone } from '@angular/core';

export class AppComponent {
  maxWidth: any = 900;
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    window.matchMedia('(max-width: 767px), (min-width: 768px) and (max-width: 991px), (min-width: 1200px)').addListener((mediaQueryList)=>{
       console.log(NgZone.isInAngularZone());
       this.ngZone.run(() => this.handler(mediaQueryList));
    });
  }

  handler(mediaQueryList) {
    this.maxWidth = 200;
  }
}

<强> Plunker Example

为什么[style]不会更新

1 个答案: