爲什麼[風格]不更新

我有這樣的代碼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

爲什麼[風格]不更新

回答

相關問題