Cette traduction: différence et ngOnInit BETWEEN Constructor
Crochet provides angulaire du cycle de vie ngOnInitpar défaut. Angulaire fourni par des crochets du cycle de vie par défaut ngOnInit.
Pourquoi doit - ngOnInitêtre utilisé, si nous avons déjà avoir un constructor? Si nous avons constructor, pourquoi utiliser ngOnInitce?
# 1 étage
Référence: La différence entre le constructeur et ngOnInit https://stackoom.com/question/2Q3mM/
Maison # 2
Du Constructorest une méthode de la classe par défaut qui est Exécuté des champs. Lorsque instancié et assure la classe EST BON Initialisation La classe et dans les sous - classes ITS Constructorest la méthode par défaut de la classe, la méthode est effectuée lorsque la classe est instancié et veiller à ce que la classe et l' initialisation correcte des champs de la sous - classe. Mieux Injector Dépendance ou angulaire (DI) analyses et paramètres Le constructeur Quand il a crée une nouvelle nouvelle instance par appel new MyClass()IT tente Set de Recherche qui correspondent à des fournisseurs Les types de paramètres Le constructeur, et passe Résout eux pour les Le constructeur comme la dépendance à l'angle ou mieux injecteur (DI) des paramètres du constructeur d'analyse, et en appelant les new MyClass()tentatives pour trouver des correspondances avec le type de paramètres du constructeur lors de la création d' une nouvelle instance du fournisseur, qui est analysé et transmis au constructeur, par exemple
new MyClass(someArg);
ngOnInitest un crochet du cycle de vie appelé par Angular2 pour indiquer que angulaire est fait la création du composant. ngOnInitest ngOnInitappelé le cycle de vie lié à indiquer angulaire créer des composants a été terminé.
Ont doivent importer WE OnInitdans l'ordre comme d'utiliser la présente ( En fait implementingLearn OnInitest pas obligatoire mais bonne pratique): Nous devons être importés OnInitafin d'utiliser ce (en fait, l' application OnInitne soit pas obligatoire , mais est considéré comme une bonne pratique):
import {Component, OnInit} from '@angular/core';
à utiliser à la méthode, de l'époque OnInitNOUS avons doivent mettre en œuvre. dans à la classe comme cela puis d'utiliser OnInitla méthode, nous devons réaliser dans cette classe.
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
Mettre en œuvre cette interface pour exécuter la logique d'initialisation personnalisée après les propriétés lié de données de votre directive ont été initialisées. Propriété de liaison de données après la commande d'initialisation, implémente cette interface pour effectuer l' initialisation de la logique personnalisée. Après est appelé le droit ngOnInit apos Les données directifs Les propriétés ont ont été liés au vérifié la première fois, et avant l'un des vérifié ses descendants ont été. Propriétés de liaison ngOnInit après les données et la première instruction de contrôle immédiatement avant de vérifier ses enfants appeler. Il est invoqué qu'une seule fois lorsque la directive est instancié. Après les instructions d'instanciation, appelé une seule fois.
Nous utilisons La plupart du temps ngOnInitpour l'initialisation au All / déclaration et trucs pour éviter travail au constructeur dans. En général, nous ngOnInitêtre utilisé pour toute initialisation / déclaration, et d'éviter le travail dans le constructeur. Le constructeur ne doit être utilisé pour initialiser les membres de la classe , mais ne doit pas faire réelle « travail ». Le constructeur ne doit être utilisé pour initialiser les membres de la classe et ne doit pas faire le véritable « travail ».
Si vous utilisez SO constructor()à la configuration injection de dépendances et pas beaucoup l'autre. Par conséquent, vous devez utiliser constructor()l'injection de dépendance jeu, sans réglages inutiles. ngOnInit () est meilleure place à "Démarrer" - apos LORSQU'IL / Composants Lorsque « Manchettes sont résolus. ngOnInit () est le "start" meilleure position - analyse la position de liaison des composants / positions.
Pour de plus amples informations , voir ici: Pour plus d' informations, voir ici:
https://angular.io/api/core/OnInit https://angular.io/api/core/OnInit
2 Vs la composante du OnInit le constructeur angulaire l'assemblage angulaire 2 et constructeurs OnInit
Maison # 3
Court et réponse simple serait, simple et réponse facile est que
Constructor: constructorIS A default methoddes pistes ( par deafult ) Lorsque le composant est en cours de construction. Constructor: constructorA default methodrun ( le deafult) lorsque l'assemblage est réalisé. Le vous créez le quand an instancede classe A que le temps aussi constructor(default method)serait appelé. Créer une classe an instance, l'appel sera constructor(default method). AUTRES mots SO, est le lorsque le composant constructed or/and an instance is created constructor(default method)est appelé et appelé le code pertinent écrit le Within est. En d' autres termes, le constructed or/and an instance is created constructor(default method)composant constructed or/and an instance is created constructor(default method)appellera le constructed or/and an instance is created constructor(default method)code approprié et appeler un écrit. Et dans GeneRally Fondamentalement Angular2IT à Injecter Des choses comme servicesLorsque le composant Le cours de construction pour une utilisation plus. En fait, généralement par Angular2injection, lorsque l'ensemble est configuré pour une utilisation ultérieure, il est généralement utilisé pour servicesquelque chose.
OnInit: NgOnInit est le premier qui le crochet du cycle de vie des composants exécute le Après constructor(default method)le lorsque le composant est en cours d' initialisation. OnInit: NgOnInit est le cycle de vie des composants liés au composant d'initialisation, il est d' abord constructor(default method)courir après.
Ainsi, votre constructeur sera appelé en premier et onInit sera appelé plus tard après la méthode constructeur. Par conséquent, le premier appel du constructeur, puis appelez onInit après la méthode constructeur.
boot.ts programme d'amorçage
import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';
export class app implements OnInit{
constructor(myService:ExternalService)
{
this.myService=myService;
}
ngOnInit(){
// this.myService.someMethod()
}
}
Ressources: LifeCycle crochet ressources: LifeCycle Crochet
CAN la Vérifiez la présente par vous petite démo qui montre la mise en œuvre des deux-choses. Vous pouvez voir ce échantillon de démonstration de ce qui démontre la réalisation des deux.
# 4 étage
Je pense que le meilleur exemple serait d'utiliser les services. Je pense que le meilleur exemple est l'utilisation du service. Disons que je veux pour récupérer les données de mon serveur lorsque mon composant obtient « activé ». Données Acquiert du serveur est supposé que j'est d'être « actif » dans mon assemblée. Disons que je veux aussi faire des choses supplémentaires aux données après que je l' obtenir à partir du serveur, peut - être que je reçois une erreur et que vous souhaitez vous connecter différemment. Disons que je veux après avoir obtenu les données du serveur aux données pour faire d'autres choses peut - être que je rencontrais une erreur et que vous souhaitez enregistrer d'une manière différente.
Il est vraiment facile avec ngOnInit sur un constructeur, il limite également le nombre de couches de rappel que je dois ajouter à ma demande. L' utilisation ngOnInit vraiment facile sur le constructeur, elle limite également le nombre de couches que je besoin d'ajouter à l'application de rappel .
Par exemple: Par exemple:
export class Users implements OnInit{
user_list: Array<any>;
constructor(private _userService: UserService){
};
ngOnInit(){
this.getUsers();
};
getUsers(){
this._userService.getUsersFromService().subscribe(users => this.user_list = users);
};
}
avec mon constructeur je pouvais appeler mon _userService et remplir mon user_list, mais peut - être que je veux faire des choses supplémentaires avec elle. J'utilise mon constructeur, je ne peux appeler _userService et user_list rempli, mais peut - être que je veux l' utiliser pour faire un peu quelque chose en plus. Comme vous assurer que tout est UPPER_CASE, je ne suis pas entièrement sûr de savoir comment mes données à venir à travers. Assurez - vous que tout est le même capital, je ne suis pas entièrement sûr de savoir comment mes données sont transmises.
Il est donc beaucoup plus facile à utiliser ngOnInit. Par conséquent, il est plus facile d'utiliser ngOnInit.
export class Users implements OnInit{
user_list: Array<any>;
constructor(private _userService: UserService){
};
ngOnInit(){
this.getUsers();
};
getUsers(){
this._userService.getUsersFromService().subscribe(users => this.user_list = users);
this.user_list.toUpperCase();
};
}
Il est beaucoup plus facile de voir, et je viens d' appeler ma fonction dans mon élément quand j'initialise au lieu d'avoir à creuser pour un autre endroit. Il rend la visualisation beaucoup plus facile, donc j'appeler une fonction dans un ensemble à l' initialisation, sans avoir à creuser ailleurs. En réalité , il est juste un autre outil que vous pouvez utiliser pour le rendre plus facile à lire et à utiliser à l'avenir. En effet, il est juste que vous pouvez utiliser un autre outil pour le rendre plus facile à lire et à utiliser à l'avenir. Je trouve aussi la pratique vraiment mauvais pour les appels de fonction de vente dans un constructeur! De plus, je trouve l'appel de fonction dans le constructeur , il est une mauvaise idée!
Maison # 5
Le premier (constructeur) est lié à l'instanciation de classe et n'a rien à voir avec Angular2. Le premier (constructeur) et classe associée est instancié avec indépendante Angular2. Je veux dire un constructeur peut être utilisé sur toutes les classes. Je veux dire, le constructeur peut être utilisé sur toutes les classes. Vous pouvez mettre en elle un certain traitement d'initialisation de l'instance nouvellement créée. Vous pouvez faire un traitement initial de l'instance nouvellement créée.
La deuxième correspond à un crochet du cycle de vie des composants Angular2: Les correspond deuxième composant au cycle de vie crochet Angular2:
Tiré du site de angulaire officiel: références de site officiel angulaire:
ngOnChangesest appelée lorsque une liaison d' entrée ou de sortie change de valeur lorsqu'une entrée ou modification de la valeur limite de sortie, seront appelésngOnChangesngOnInitIl est appelé après la premièrengOnChangesngOnInitétait après le premier appelngOnChanges
Si vous utilisez SO ngOnInitSI ON fait confiance Traitement Initialisation Le Manchettes de composants (Paramètres des composants pour l' exemple avec défini @Input), sinon le constructeur serait assez ... Alors, vous devez utiliser ngOnInitsi le processus d'initialisation dépend des composants (éléments est utilisé pour définir les paramètres liés par exemple set @Input), sinon la structure est assez ......
Maison # 6
Le test de la présente À, I écrit le code, Empruntant à l' NativeScript le tutoriel : Pour tester cela, je l' ai écrit le code suivant dessine tutoriel NativeScript :
user.ts Nom d' utilisateur
export class User {
email: string;
password: string;
lastLogin: Date;
constructor(msg:string) {
this.email = "";
this.password = "";
this.lastLogin = new Date();
console.log("*** User class constructor " + msg + " ***");
}
Login() {
}
}
login.component.ts login.component.ts
import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"
@Component({
selector: "login-component",
templateUrl: "pages/login/login.html",
styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {
user: User = new User("property"); // ONE
isLoggingIn:boolean;
constructor() {
this.user = new User("constructor"); // TWO
console.log("*** Login Component Constructor ***");
}
ngOnInit() {
this.user = new User("ngOnInit"); // THREE
this.user.Login();
this.isLoggingIn = true;
console.log("*** Login Component ngOnInit ***");
}
submit() {
alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
}
toggleDisplay() {
this.isLoggingIn = !this.isLoggingIn;
}
}
Sortie de la console de sortie de la console
JS: *** User class constructor property ***
JS: *** User class constructor constructor ***
JS: *** Login Component Constructor ***
JS: *** User class constructor ngOnInit ***
JS: *** Login Component ngOnInit ***
