Açısal olarak değişiklik algılamayı manuel olarak tetikleme

Bir özelliği olan bir Açısal bileşen yazıyorum Mode(): string.

Herhangi bir olaya yanıt olarak bu özelliği programlı olarak ayarlayabilmek istiyorum.

Sorun, bir tarayıcı olayı olmadığında, şablon bağlamanın {{Mode}}güncellenmemesi.

Bu değişiklik algılamayı manuel olarak tetiklemenin bir yolu var mı?

Bunlardan birini deneyin:

• ApplicationRef.tick()- AngularJS'lere benzer $rootScope.$digest()- yani, tüm bileşen ağacını kontrol edin
• NgZone.run(callback)- benzer $rootScope.$apply(callback)- yani, Açısal bölge içindeki geri arama işlevini değerlendirin. Bence, ama emin değilim, bu geri arama işlevini yürüttükten sonra tam bileşen ağacı kontrol sonuçlanır.
• ChangeDetectorRef.detectChanges()- benzer $scope.$digest()- yani, sadece bu bileşeni ve çocuklarını kontrol edin

Sen enjekte edebilir ApplicationRef, NgZoneya ChangeDetectorRefda bileşen içine.

Kabul edilen cevap referansını kullandım ve bir örnek vermek istiyorum, çünkü Açısal 2 belgelerinin okunması çok zor, umarım bu daha kolay:

1. İçe Aktar NgZone:

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

2. Sınıf kurucunuza ekleyin

   constructor(public zone: NgZone, ...args){}
   

3. Kodu şununla çalıştır zone.run:

   this.zone.run(() => this.donations = donations)
   

MarkForCheck () ile güncelleyebildim

Import ChangeDetectorRef

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

Enjekte edin ve başlatın

constructor(private ref: ChangeDetectorRef) { 
}

Son olarak gerçekleşecek değişiklik tespitini işaretleyin

this.ref.markForCheck();

İşte markForCheck () işlevinin çalıştığı ve detChanges () işlevinin çalışmadığı bir örnek.

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

DÜZENLEME: Bu örnek, sorunu artık tasvir etmiyor :( Bence düzeltildiği yerde daha yeni bir Açısal sürüm çalışıyor olabilir.

(Tekrar çalıştırmak için STOP / RUN tuşuna basın)

Angular 2+ sürümünde @Input dekoratörünü deneyin

Ana ve alt bileşenler arasında hoş bir özellik bağlayıcılığına izin verir.

İlk olarak alt öğeye iletilecek nesneyi / özelliği tutmak için üst öğede genel bir değişken oluşturun.

Sonra alt öğeden geçirilen nesneyi / özelliği tutmak için alt öğede genel bir değişken oluşturun.

Ardından, alt şablonun kullanıldığı üst html'de, alt değişkenin adıyla köşeli parantez gösterimi ekleyin ve ardından üst değişkenin adına eşit olarak ayarlayın. Misal:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

Son olarak, child özelliğinin alt bileşende tanımlandığı yerde, Giriş dekoratörünü ekleyin:

@Input()
public childVariable: any

Üst değişkeniniz güncellendiğinde, güncelleştirmeleri html'sini güncelleyecek olan alt bileşene iletmelidir.

Ayrıca, alt bileşende bir işlevi tetiklemek için ngOnChanges'e bakın.

ChangeDetectorRef.detectChanges () - $ scope. $ Digest () benzeri - yani, sadece bu bileşeni ve alt öğelerini kontrol edin