Angulaire 4 ngOnInit pas appelé après routeur.naviguer
J'ai 3 onglets un onglet affiche un tableau avec la liste des employés. Fonctionne bien quand il est chargé pour la première fois.ngOnInit Récupère des données à partir du serveur à l'aide de http get. Après cela, lorsque je clique sur ajouter un nouvel employé pour ouvrir un formulaire, qui prennent d'entrée de l'utilisateur et lorsque que soumettre est cliqué, j'appelle une fonction qui appelle la http service de poste à poste que des données sur mon serveur où il insère des enregistrements, puis après cela, il est redirigé vers l'employé composant, mais maintenant que l'employé composant est déjà chargé, je ne vois pas le nouveau dossier que j'ai inséré dans le tableau, à moins que je recompile mon code.
employé.composante.ts ( Qui charge la Table employee)
import { Component, OnInit, OnDestroy } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
public employeeObj:any[] = [{emp_id:'',empname:'',joindate:'',salary:''}] ;
constructor(private employeService:EmployeeService) { }
ngOnInit() {
this.employeService.getEmployees().subscribe(res => this.employeeObj = res);
}
}
forme.composante.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EmployeeService } from '../../employee.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
empform;
ngOnInit() {
this.empform = new FormGroup({
empname: new FormControl(""),
joindate: new FormControl(""),
salary: new FormControl("")
})
}
constructor(private employeeService: EmployeeService, private router:Router)
{ }
onSubmit = function(user){
this.employeeService.addEmployee(user)
.subscribe(
(response) => { this.router.navigate(['/employees']); }
);
}
}
employé.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
@Injectable()
export class EmployeeService{
constructor(private http:Http){}
addEmployee(empform: any[]){
return this.http.post('MY_API',empform);
}
getEmployees(){
return
this.http.get('MY_API').map((response:Response)=>response.json());
}
}
AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { EmployeeService } from './employee.service';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { ContainerComponent } from './container/container.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { EmployeesComponent } from './employees/employees.component';
import { CompaniesComponent } from './companies/companies.component';
import { InternsComponent } from './interns/interns.component';
import { FormComponent } from './employees/form/form.component';
import { ComformComponent } from './companies/comform/comform.component';
import { InternformComponent } from './interns/internform/internform.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
NavComponent,
ContainerComponent,
DashboardComponent,
EmployeesComponent,
CompaniesComponent,
InternsComponent,
FormComponent,
ComformComponent,
InternformComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot([
{
path:'dashboard',
component:DashboardComponent
},
{
path:'employees',
component:EmployeesComponent
},
{
path:'companies',
component:CompaniesComponent
},
{
path:'interns',
component:InternsComponent
},
{
path:'addemployee',
component:FormComponent
},
{
path:'comform',
component:ComformComponent
},
{
path:'internform',
component:InternformComponent
}
])
],
providers: [EmployeeService],
bootstrap: [AppComponent]
})
export class AppModule { }
Le problème c'est que je vais appeler mon API de ngOnInit qui charge parfaitement de la première fois que le composant charge. Lorsque je soumets le formulaire, il va à mon API et il est alors redirigé vers l'employé composant, mais les données ne sont pas mis à jour comme il se doit.
P. S : je suis désolé pour ces petits post. Je suis un peu nouveau sur ce site web.
Mise à jour :
Il a été plus d'un an maintenant, depuis que j'ai posté ce fil et je vois beaucoup de gens qui ont intérêt ou peut-être pas. Cependant, je tiens à souligner que j'ai déjà compris ce qui a provoqué l'erreur et je vais maintenant essayer de vous faire comprendre la solution.
Le concept le plus important de l'adapter ici est l'angle de Cycle De Vie Des Crochets.
Ce qui se passe est, nous l'appelons ngOnInit la première fois qu'un composant est chargé et cela va déclencher une seule fois lorsque l'angle d'application est amorcé. Ceci est similaire à un constructeur de la classe, mais il ne se déclenche une seule fois. Donc, vous ne devriez pas mettre n'importe quel DOM liées à des modifications ici. Vous devez comprendre Angulaire du Cycle de Vie des Crochets pour résoudre ce problème. Je n'ai pas de solution de travail avec moi, comme j'ai déménagé à Vuejs depuis les 8 derniers mois, mais dans peu de temps libre, je vais poster une mise à jour ici.
il sera grille si vous pouviez poster ici quelques plunker avec démonstration de ce comportement
J'ai ajouté le code bro. Je suis désolé de ne pas le faire la première fois. @DanielCooke
OriginalL'auteur Viral Patel | 2017-06-02
Vous devez vous connecter pour publier un commentaire.
Veuillez vous essayez d'ajouter
router
événement dansemployee
composant. De sorte que chaque fois quand/employee
url état est routé il va chercher les détails de l'employé.employé.ts composant
return this.http.post('MY_API',empform)
ne suffiront pas à aller vous chercher les résultats. Vous devez mapper les résultats. angular.io/docs/ts/latest/guide/server-communication.html s'il vous Plaît mettre à jour la question de savoir si vous l'avez déjà fait.Je l'ai fait, monsieur. Pourtant, je ne suis pas en mesure de mettre à jour l'employé composant.
Oui, monsieur, parfaitement. Il n'est pas. Comment puis-je vous montrer mes fichiers de modèle?
Notez que si votre url de l'itinéraire n'est pas modifié pendant votre
form
composant est chargé, puisemployee
composant ne sera pas actualisé, même lorsque vous nerouter.navigate
.OriginalL'auteur Amit Chigadani
En règle générale, lors de l'acheminement, l'angle de routeur ré-utiliser la même instance d'un composant s'il se peut.
Ainsi, par exemple, la navigation à partir de
/component/1
à/component/2
, où l'url est mappé à la même composante (mais avec des params) fera en sorte que le routeur pour instancier une instance de Composant lorsque vous accédez à/component/1
, et puis de le ré-utiliser le même exemple, lorsque vous accédez à/component/2
. D'après ce que vous décrivez (oùngOnInit
ne doit être appelé qu'une seule fois), il me semble que c'est ce que vous êtes à la rencontre. C'est difficile à dire pour sûr, sans voir des modèles et des parcours de configuration. Je sais que vous dire que votre URL est en train de changer de/employees
à/form
, mais qui ne peut pas d'importance, en fonction des modèles et de la route de configuration est mis en place. Vous pouvez afficher le code (modèles et de configuration du routeur) pour l'examen si vous le souhaitez.Sauf que, une autre option est que le routeur expose tous ses événements comme un flux. Donc, vous pouvez vous abonner à ce flux et de la loi sur que, plutôt que de compter seulement sur les
ngOnInit
.Dans votre employé.composante.ts
MODIFIER
Je vois un morceau de bizarre code:
Mais dans l'ensemble, vous dites que si vous accédez à votre employé composant, puis à votre composant formulaire et puis retour à votre employé composant, quand vous frappez l'employé de composant la seconde fois, votre employé liste n'a pas d'actualisation.
Pouvez-vous utiliser
console.log
états à s'assurer quengOnInit
est appelée plusieurs fois dans votre flux d'écran ci-dessus? Car, sur la base de configuration de votre routeur, lorsque vous accédez à la liste des employés à la forme et au dos, votre employé composant doit être ré-initialisé (en appelantngOnInit
nouveau)Vous pouvez poster le code des fichiers. Quelle erreur avez-vous?
Oui, Monsieur, voici les captures d'écran : Employé Composant à partir de la table est chargé et récupère des données à partir de l'API : prntscr.com/ffzznd Composant Formulaire qui est utilisé pour insérer les données dans la base de données à l'aide de l'API : prntscr.com/ffzzxs Le fichier de Service pour faire de http post et get demander à mon API : prntscr.com/fg006t
Quelque chose monsieur? Encore ne trouvent pas de solution
Encore une fois, quelle est l'erreur que vous obtenez? Aussi, en règle générale, merci de poster le code plutôt que des captures d'écran. je ne peux pas copier, coller et adapter les exemples de code à partir d'une capture d'écran, ce qui rend très difficile de régler les problèmes dans votre code
OriginalL'auteur snorkpete
Si vous passez @angular/[email protected] semble être le cas sur routerLink si vous naviguez il va déclencher ngOnInit
OriginalL'auteur Rey Ramos
Lorsque votre composant est relié par une route qui, mieux que d'ajouter votre code dans le constructeur de l'abonnement à ActivatedRoute params et de forcer la détection de changement par exemple:
OriginalL'auteur Anji K
Assurez-vous d'avoir
<route-outlet></route-outlet>
à l'intérieur app.component.html. Cela devrait fonctionner très bien avec la dernière version Angulaire 5.OriginalL'auteur Nizar B.
Ce que je pense il arrive, c'est votre voie de l'appel est à l'extérieur de l'angle du cycle de vie parce que vous faites un appel asynchrone droit?
Vérifiez d'abord si votre journal de montrer quelque chose comme ceci:
Si c'est le cas, la solution est très simple, vous avez à dire Angulaire pour appeler votre routage directive à l'intérieur de leur cycle de vie.
Code suivant devrait résoudre votre problème:
this.ngZone.run(() => ...
OriginalL'auteur Carlos Verdes