Créer un composant DisplayComponent ayant un sélecteur display-component
On me demande de créer un composant Angular nommé DisplayComponent et
ayant display-component pour sélecteur.
il doit utiliser le composant VoterComponent(sélecteur=voter-component) dont le code est fourni.
DisplayComponent a 3 champs public nommés question,yesAnswer et noAnswer.
ils représentent une question posée à
l'utilisateur et les choix de réponses possibles affichés dans VoterComponent.
DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer
question,yesAnswer et noAnswer en entrée.
Quand l'utilisateur vote,VoterComponent créé un événement de type boolean vers un @Output
nommé output.
Je dois afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote:Si output
est vrai,alors on affiche yesAnswer,sinon on affiche noAnswer.
Voici le code:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| import{Component,Input,NgModule,Output,EventEmitter } from '@angular/core';
@component({
selector:'display-component',
template:'
'
})
export class DisplayComponent {
public question="Too easy?"
public yesAnswer="Yes";
public noAnswer="no";
}
// ne pas changer
@component({
selector:'voter-component',
template:
{{question}}
<button (click)="vote(true)">{{yesAnswer}}</button>
<button (click)="vote(false)">{{noAnswer}}</button>
})
export class VoterComponent {
@Input()
public question:string;
@Input()
public yesAnswer:string;
@Input()
public noAnswer:string;
@Output()
public output=new EventEmitter<boolean>();
public vote(vote: boolean):void {
this.output.emit(vote);
}
} |
J'ai cherché pendant un moment et je ne sais pas comment compléter ce code là,
mais j'ai essayé quelque chose et j'ai commencé ainsi ,voici le code que je propose:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import{Component,Input,NgModule,Output,EventEmitter } from '@angular/core';
@component({
selector:'display-component',
template:'<div id=lastVote>
<h1 *ngIf="output">{{ }}</h1>
'
})
export class DisplayComponent {
public question="Too easy?"
public yesAnswer="Yes";
public noAnswer="no";
} |
mais je ne sais pas comment
traduire les phrases suivantes en Angular2+:"
DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer
question,yesAnswer et noAnswer en entrée.
Quand l'utilisateur vote,VoterComponent créé un événement de type boolean vers un @Output
nommé output.
Je dois afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote:Si output
est vrai,alors on affiche yesAnswer,sinon on affiche noAnswer."
Avez vous une idée svp?
