Dans quel but utiliser ApplicationRef en angulaire?

Question

J'ai appris une classe dans API (angular.io). Mais, je ne peux pas comprendre ApplicationRef en angulaire.

S'il vous plaît, donnez-moi un petit exemple en utilisant ApplicationRef.

Answer 1

https://angular.io/api/core/ApplicationRef

• permet d'invoquer la détection de changement application large en appelant appRef.tick()
• permet d'ajouter/supprimer des vues à inclure ou à exclure de la détection de changement à l'aide attachView() et detachView()
• fournit une liste des composants enregistrés et des types de composants utilisant componentTypes et components et d'autres informations relatives à la détection de changement

Answer 2

ApplicationRef contient référence à la vue de la racine et peut être utilisé pour exécuter manuellement la détection du changement en utilisant la fonction tick

Appelez cette méthode pour traiter explicitement la détection du changement et de ses effets secondaires .

En mode de développement, tick() effectue également un second cycle de détection de changement pour s'assurer qu'aucun autre changement n'est détecté. Si des modifications supplémentaires sont détectées au cours de ce deuxième cycle, les liaisons dans l'application ont des effets secondaires qui ne peuvent pas être résolus dans une seule passe de détection de modification . Dans ce cas, Angular renvoie une erreur, car une application Angular ne peut avoir qu'une seule passe de détection de changement au cours de laquelle toute la détection de changement doit être terminée.

Voici un exemple:

@Component() 
class C { 
    property = 3; 
    constructor(app: ApplicationRef, zone: NgZone) { 
     // this emulates any third party code that runs outside Angular zone 
     zone.runOutsideAngular(()=>{ 
      setTimeout(()=>{ 
      // this won't be reflected in the component view 
      this.property = 5; 

      // but if you run detection manually you will see the changes 
      app.tick(); 
      }) 
     }) 

Une autre application consiste à attacher une vue de composant créé dynamiquement pour la détection de changement si elle a été créée à l'aide d'un nœud racine:

addDynamicComponent() { 
    let factory = this.resolver.resolveComponentFactory(SimpleComponent); 

    let newNode = document.createElement('div'); 
    newNode.id = 'placeholder'; 
    document.getElementById('container').appendChild(newNode); 

    const ref = factory.create(this.injector, [], newNode); 
    this.app.attachView(ref.hostView); 
    } 

check this answer pour plus de détails.