2016-12-22 57 views
14

Büyük ng1 (V1.5.9) uygulamasında bazı yeni ng2 (V2.2.4) bileşenlerini kullanmak için ng yükseltme kullanan bir uygulamada (ui yönlendirici) Şu anda çok garip bir değişim tespit sorunu görüyorum. Bildiğim kadarıyla söyleyebilirim, bu NG2 bazı yükseltme girmiştir, ama ne yazık ki ben kolayca anda teyit edemiyoruz. Bu bileşen yükseltme-adaptörü yükseltilmiş ve modülde bir giriş-bileşeni olarak tescil edilmiştirDeğiştirme algılaması angular1 ui yönlendiricisi üzerinden gezinildikten sonra ng2 bileşeninde düzgün çalışmıyor

@Component({ 
    selector:'my-ng2-demo', 
    template: '<div>{{status}}</div>' 
}) 
export class MyNg2Demo implements OnDestroy { 
    public status:boolean = true; 
    private interval:any; 

    constructor() { 
     this.interval = setInterval(() => { 
      this.status = !this.status; 
      console.log('status: ' + this.status); 
     }, 2000); 
    } 

    ngOnDestroy():void { 
     clearInterval(this.interval); 
    } 

} 

i basitçe bu bileşeni var Şimdiye kadar bir asgari örnekle azaltmıştır

.

bileşen böyle bir NG1 kumandanın şablonda kullanılır:

<my-ng2-demo></my-ng2-demo> 

Ben bir tarayıcı açın ve o sayfanın (NG1 kumandanın yol) her şey beklendiği gibi çalıştığını doğrudan gidin: ui her 2 saniyede bir doğru/yanlış dönüşüm gösterir. Ancak, & adresine gidip sayfaya geri dönüp (bazı farklı rotaları ziyaret ederek) aniden değişimin değişmesi işe yaramıyor gibi görünüyor. konsolunda hala beklenen değerleri görmek rağmen görüntülenen değer dönüşümlü sadece yaklaşık her 5-6 saniyede, oldukça rastgele görünüyor.

Ben buna bileşenin yapıcı değiştirdiğinizde:

constructor(private zone: NgZone) { 
    this.interval = setInterval(() => { 
     zone.run(() => { 
      this.status = !this.status; 
      console.log('status: ' + this.status); 
     }); 
    }, 2000); 
} 

Aniden tekrar çalışır.

Açıkçası, gerçek uygulamada gördüğüm davranış çok daha karmaşık olduğundan (muhtemelen korunamayan düzinelerce yere zone.run eklemek zorundayım) bu uygun bir çözüm değildir.

saatlerce bu debug ve ne olup bittiğini anlamıyorum. Chrome'un JavaScript uzmanında, sayfanın hiç bir şeyin olmadığı 5-6 saniyede neredeyse tüm zaman boyunca boşta olduğunu görüyorum.

profiler Bu

(ama temelde aynı görünüyor) bu demo-bileşeninden bir ekran görüntüsü değil ama sekme bileşeni profilleme dan Başlangıçta (sekme anahtarlama arasında gözle görünür hiçbir eylemlerle tıpkı uzun sürdü) test edildi .

güncelleme:

Ben de oldukça şaşırtıcı ne bulmak biraz daha fazla deney yerine zone.run çağrısında durum değiştiren kodu koyma, ben (ApplicationRef.tick() bir çağrı eklerken burada belirtildiği gibi olmasıdır sonra örneğin: https://stackoverflow.com/a/34829089/1335619) o da hiç işe eTMEZ. Tam bir uygulama değişikliği-algılama zorlayarak hiçbir şey yapmaz, ama bir bölge işletilen çağrısı nasılsa çalışır neden anlamıyorum. çalışmıyor kene çağrısı ile

örnek kod:

constructor(private applicationRef:ApplicationRef) { 
    this.interval = setInterval(() => { 
     this.status = !this.status; 
     console.log('status: ' + this.status); 
     applicationRef.tick(); 
    }, 2000); 
} 
+0

Üretmek için en az bir örnek var mı? Belki plunker veya github repo? – yurzui

+0

henüz değil, ancak bir temel angular1 + angular2 + ngUpgrade + ui yönlendirici kurulumuna sahip bir plunker biliyorsanız, bunu benim örneğime uyarlamaktan mutluluk duyarım. – NoUsername

+0

Herhangi bir bileşende aşağıdaki bayrağı bulundurmadığınızı kontrol edin: kapsülleme: ViewEncapsulation.None ve mantığı kurucuyu ngOnInit() öğesine taşımayı deneyin. – Sargon

cevap

3

kullandığınız Açısal sürümünde bir hata vardır. Değişiklik algılama, ng yükseltilmiş uygulamalarda gerektiği gibi çalışmaz.

Daha fazla bilgi için lütfen https://github.com/angular/angular/issues/12318'a bakın.

2.4.4'e yükseltirseniz, sorunu çözmelidir.

+0

Yine de benim için sürüm 4.1.1 – Johannes