Créer un composant DisplayComponent ayant un sélecteur display-component
Fermé
LaMagie_37300
Messages postés5Date d'inscriptiondimanche 25 octobre 2020StatutMembreDernière intervention 4 novembre 2020
-
25 oct. 2020 à 14:27
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:
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 le code ci dessous
@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);
}
}
Voici le code que j'ai proposé:
import{Component,Input,NgModule,Output,EventEmitter } from '@angular/core';
@component({
selector:'display-component',
template:'<div id=lastVote>
<h1 *ngIf="output">{{ }}</h1>
<voter-component></voter-component>
</div>
'
})
export class DisplayComponent {
public question="Too easy?"
public yesAnswer="Yes";
public noAnswer="no";
}
J'ai essayé de traduire la phrase suivante en Angular2+:
"DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer
question,yesAnswer et noAnswer en entrée."
Par contre je ne sais pas comment traduire la phrase suivante en angular2+?
"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."
j'ai utilisé :
Et je ne sais pas si c'est juste car je dois traduire la condition :Si output est vrai,alors on affiche yesAnswer , sinon on affiche noAnswer et je suis bloqué et je ne sais pas comment faire la suite.
Pouvez vous m'aider?
A voir également:
Créer un composant DisplayComponent ayant un sélecteur display-component