2016-01-30 15 views
95

Jak wymusić ponowne renderowanie komponentu w Angular 2? Do celów debugowania pracy z Redux chciałbym zmusić składnik do ponownego renderowania jego widoku, czy to możliwe?Jak wymusić ponowne renderowanie komponentu w Angular 2?

+0

Co masz na myśli przez "ponowne renderowanie". Zaktualizować powiązania? –

+0

Po prostu krótkie pytanie, dlaczego musisz wymusić ponowne renderowanie? –

+4

Możliwy duplikat ręcznego wykrywania [Wyzwalania Angular2 zmiany] (http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually) – blo0p3r

Odpowiedz

138

Rendering dzieje po wykryciu zmian. Aby wymusić wykrywanie zmian, tak że składnik wartości nieruchomości, które zmieniły się rozmnażane do DOM (a następnie przeglądarka będzie świadczyć te zmiany w widoku), oto kilka opcji:

  • ApplicationRef.tick() - podobny do kątowa 1-$rootScope.$digest() - tzn. sprawdź pełne drzewo komponentów:
  • NgZone.run(callback) - podobne do $rootScope.$apply(callback) - tj. sprawdź funkcję zwrotną wewnątrz strefy Angular 2. Myślę, ale nie jestem pewien, że to kończy się sprawdzanie pełnego drzewa komponentów po uruchomieniu funkcji zwrotnej.
  • ChangeDetectorRef.detectChanges() - podobny do $scope.$digest() - to znaczy, sprawdź tylko tego składnika i jego dzieci

można wstrzyknąć ApplicationRef, NgZone lub ChangeDetectorRef do swojego urządzenia.

Dla konkretnego scenariusza polecam ostatnią opcję, jeśli zmienił się tylko jeden komponent.

+3

wypróbuj wszystkie z nich, ale nadal nie działa na ios, smutny – vuhung3990

+1

Czy działający kod na ChangeDetectorRef dla ostatecznej wersji angular2? Mam teraz do czynienia z sytuacją, w której widok nie jest aktualizowany po wysłaniu żądania http, aby utworzyć nowego użytkownika, a następnie po sukcesie, przesuwając nowy obiekt do istniejącej starej listy użytkowników (używanej do iteracji w widoku). Dość dziwne, że "po raz pierwszy mam do czynienia z aktualizacją, która nie działa w ng2". Strategia wykrywania zmian jest domyślna, więc wiem, że nie naruszyłem strategii wykrywania zmian. – Gary

+0

@Gary, powinieneś zamieścić nowe pytanie i dołączyć swój komponent i kod serwisowy (najlepiej, jeśli posiadasz minimalny plunker demonstrujący problem). Powszechnym problemem, jaki widziałem, nie jest użycie właściwego kontekstu 'this' w wywołaniu zwrotnym POST. –

33

TX, znalazł obejście mi potrzebne:

constructor(private zone:NgZone) { 
    // enable to for time travel 
    this.appStore.subscribe((state) => { 
     this.zone.run(() => { 
      console.log('enabled time travel'); 
     }); 
    }); 

działa zone.run zmusi komponent ponowne renderowanie

+3

co to jest appStore w tym kontekście - jaki rodzaj zmiennej i jej typ? wydaje się być zauważalne ... ale moje obserwowalne jest wewnątrz komponentu, który chcę odświeżyć jednym kliknięciem ... i nie wiem jak uzyskać dostęp do metody/zmiennej komponentu potomnego z obiektu nadrzędnego/bieżącej lokalizacji –

Powiązane problemy