为什么[风格]不更新

我有这样的代码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上chenged另一instriction 之一值。

此代码app.component.html

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

虽然maxWidth改变它不起作用。我认为它不更新DOM元素为什么不起作用。我试图用（点击）和所有的作品。

来源

2016-12-05 Lestoroer

'maxWith'在哪里以及如何更改？你是否确认实际改变了？ –

请不要做这样的事情。尝试用CSS来解决样式特定的东西，而不是使用角度。如果你真的需要用角度来做，不要使用style属性，并使用CSS类。 – Dinistro

是的，我用console.log（）运行，当宽度改变时，console.log（）被触发。我认为DOM不会更新，我想如何更新它 – Lestoroer

您可以使用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

来源

2016-12-05 11:16:39 yurzui

谢谢你，这很好。 – Lestoroer

为什么[风格]不更新

回答

相关问题