Je suis un débutant absolu avec angulaire 2 et j'ai des doutes sur un exemple tutoriel que je suis en train d'étudier sur le « lier à des événements personnalisés ».Comment exactement fonctionne ce tutoriel Angular 2 sur la liaison d'événements personnalisés?
J'ai donc la principale composante qui ont ce point de vue du nom app.component.html:
<div class="container">
<app-cockpit
(serverCreated)="onServerAdded($event)"
(blueprintCreated)="onBlueprintAdded($event)">
</app-cockpit>
<hr>
<div class="row">
<div class="col-xs-12">
<app-server-element
*ngFor="let serverElement of serverElements"
[srvElement]="serverElement"></app-server-element>
</div>
</div>
</div>
Dans ce point de vue est défini l'inclusion du sous-composante qui incluent ce sous vue dans la vue principale précédente, la cockpit.component.html contenu du fichier:
<div class="row">
<div class="col-xs-12">
<p>Add new Servers or blueprints!</p>
<label>Server Name</label>
<input type="text" class="form-control" [(ngModel)]="newServerName">
<label>Server Content</label>
<input type="text" class="form-control" [(ngModel)]="newServerContent">
<br>
<button
class="btn btn-primary"
(click)="onAddServer()">Add Server</button>
<button
class="btn btn-primary"
(click)="onAddBlueprint()">Add Server Blueprint</button>
</div>
</div>
qui contient 2 bouton pour soumettre le pour m.
Voici le premier doute, d'après ce que je comprends faire quelque chose comme:
(click)="onAddServer()
signifie quelque chose comme: « lorsque l'événement click se produit, suivez la méthode onAddServer() définie dans le contrôleur de ce point de vue ".
Ainsi, dans les coockpit.component.ts classe je:
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
/*
EvebtEmitter è un oggetto del framework Angular che permette di emettere i nostri custom events
@Output() decorator usato per passare qualcosa fuori dal component
*/
@Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
@Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();
newServerName = '';
newServerContent = '';
constructor() { }
ngOnInit() {
}
onAddServer() {
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
onAddBlueprint() {
console.log('INTO onAddBluePrint()');
this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
}
Cela devrait fonctionner de cette façon:
La variables NouveauNomServeur et newServerContent contient les données insérées par l'utilisateur sous la forme parce que ces variables sont liés par [(ngModel)] directive:
<input type="text" class="form-control" [(ngModel)]="newServerName">
<input type="text" class="form-control" [(ngModel)]="newServerContent">
Lorsque l'utilisateur clique sur le bouton Ajouter un serveur la onAddServer() méthode est perfromed et un événement avec nomServeur et serverContent contenu est émis à la extern:
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
Donc un doute est: qu'est-ce qu'un événement? Il me semble qu'un simple objet Json contient des informations.
Ensuite, le second doute est: le serverCreated événement est émis par ce contrôleur au extern parce qu'il utilise deorate @output() décorateur.
Quel est le destinataire par défaut? Il me semble que c'est le contrôleur de la componet mère parce que dans mes app.component.ts classe j'ai cette méthode qui gère cet événement:
onServerAdded (ServerData: {serverName: string, serverContent: string}) { this.serverElements.push ({ Type: 'serveur', nom : serverData.serverName, contenu : ServerData.serverContent }); }
Que signifie exatly le:
Il est comme je dis que dans la vue du composant principal, je dis que le composant app-cockpit jeter ces événements à la composant parent.
Est-ce que mon raisonnement est correct ou est-ce qu'il me manque quelque chose? Cela signifie donc que je peux utiliser cette stratégie uniquement pour passer un événement d'un composant enfant à un composant parent. Ou puis-je faire le contraire (de parent à enfant, je ne sais pas si c'est un cas d'utilisation réel).