1
votes

Chargement des données de l'API après l'initialisation de la page

Je pose ma première question sur ce forum parce que j'y suis resté un moment. Je dois souligner que je ne suis pas un expert angulaire.

Savez-vous comment charger une page, puis l'un des composants à l'intérieur?

Par exemple, j'ai une page avec une barre de navigation et un composant d'appel API (qui affiche un tableau). J'aimerais que la page se charge, nous voyons la barre de navigation, et alors seulement le composant d'appel d'API est activé.

Merci!

angular loading

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser le hook de cycle de vie ngAfterViewInit pour vous assurer que les instructions sont exécutées une fois la vue complètement initialisée.

Vous pouvez en savoir plus à ce sujet ici

Essentiellement, vous devrez faire ::

export SomeComponent implements AfterViewInit

ngAfterViewInit() {}

Si vous placez la barre de navigation dans un composant séparé et en remplissant les données de l'API dans un composant séparé, procédez comme suit ::

Dans votre composant de navigation,

En HTML: vous pouvez placer le

Dans TS: Inside ngAfterViewInit () , faites router.navigate () p>

Veuillez ajouter un commentaire si vous pensez avoir besoin de plus d'aide à ce sujet :)

8 commentaires

Bonjour, merci pour votre réponse! Je ne suis pas sûr d'avoir bien compris ce ngAfterViewInit, en particulier le "router.navigate ()". Le "router.navigate ()" chargera le composant dans la même page? Je vais essayer.

Naah, si vous souhaitez charger les détails de l'API en tant que composant séparé. Vous devrez rendre le composant api en tant qu'enfant du composant navbar.

Ensuite, vous devrez placer un dans la barre de navigation html et faire router.navigate dans la barre de navigation TS à l'intérieur de ngAfterViewInit ()

Sinon, vous pouvez utiliser un seul composant et faire l'appel api dans afterViewInit ()

Je n'ai pas compris ça. Il devait être un enfant ... Je vais faire des tests pour demain, un peu compliqués mais très intéressants!

Une chance avec ngAfterViewInit ()?

cela semble fonctionner, le ngAfterViewInit () est très intéressant! Je ferme la question grâce à vous.

Pas de soucis mec. Je suis content que cela vous ait aidé 😊

0
votes

Voici un StackBlitz que j'ai lancé pour vous, déplacez simplement le la pièce de demande en conséquence dans l'événement de cycle de vie nécessaire.

Je devrais mentionner qu'il serait préférable de déplacer la demande réelle dans un service, puis à partir du composant, de déclencher la demande.

import {
  Component,
  OnInit,
  AfterViewInit
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  todos: Array < Todo > ;

  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/todos').subscribe((data: Todo[]) => {
      this.todos = data;
    });
  }

  ngOnInit(): void {
    console.log('ngOnInit');
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit');
  }


}
export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

1 commentaires

Bonjour, merci pour votre réponse! Je ne comprends pas comment le html se met à jour si les données ne sont pas présentes lors de la création du composant. De plus, si je modifie une variable initialisée dans le constructeur, puis modifie dans le ngAfterViewInit, cela va-t-il être un problème?

0
votes

Pour ceux qui utilisent le router-outlet, et les balises pour les URL, par exemple dans l'en-tête, vous pouvez utiliser le routerLink pour charger uniquement le composant à l'intérieur (j'ai découvert cela récemment).

En ayant un chemin "home" , par exemple, vous pouvez:

<a routerLink="/home">Home</a>

Quelques documents: FRANÇAIS : https://guide-angular.wishtack.io/ angular / routing / mise-en-place-du-routing

FRANÇAIS : https://www.pluralsight.com/guides/activating-routes-with-routerllink-in-angular

0 commentaires