Discussion :

[keokaz]

Bonjour,

je souhaite récupérer une valeur d'un attribut html depuis la vu pour la traiter dans le composant
voici ce que j'ai testé:
page.component.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
<p >
  <span (leprix)="trois euro">
 
  </span>
</p>

voici le composant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prix',
  templateUrl: './prix.component.html',
  styleUrls: ['./prix.component.css']
})
 
export class PrixComponent implements OnInit {
  public prix:string ='je suis le prix';
 
 
  constructor() { 
    console.log(leprix);
  }
 
 
 
  ngOnInit() {
  }
 
 
 
}

comment je dois faire pour afficher dans ma console "trois euros" ?
je souhaite que "trois euro" une chaine qui provient seulement du fichier html (pour le moment je souhaite pas le générer depuis un modèle).
merci de vos réponse

[Marco46]

Il manque la déclaration de ton paramètre leprix cf doc.

Mais ton composant n'est pas utilisé dans le template que tu as fourni.

Tu devrais faire les tutoriels.

[keokaz]

merci de ta réponse, tu veux dire déclarer en @input ?

@input c'est bien la variable qui part du template au composant et
@output c'est la variable qui part du composant en template ?

sinon c'est bien les parenthèse qu'il faut mettre pour transmettre de la vue au composant ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
(depuisHTML)="abc"  // je transmet depuis html au composant
[depuisHTML]="abc" //  la vue html va récupérer dans le composant l'attribut qui s'appelle depuisHTML

voici ce que j'ai testé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div  (depuisHTML)="abc" class="menu four wide" *ngFor="let prix of tarif">
  <h1>
   numéro: {{prix.id}}  *  le produit: {{prix.produit}}  *  le prix: {{prix.prix}} 
  </h1>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
import { Component, OnInit, Input, Output } from '@angular/core';
import {HttpModule,Http, Response,RequestOptions,Headers} from '@angular/http';
 
@Component({
  selector: 'app-prix',
  templateUrl: './prix.component.html',
  styleUrls: ['./prix.component.css']
})
 
export class PrixComponent implements OnInit {
 
 @Input() depuisHTML:any; 
 
 
  tarif: Object;
 
  constructor(public http:Http) { 
    console.log(this.depuisHTML);
  }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
indefined

est ce que depuis HTML doit être situé obligatoirement situé à l'intérieur de la balise <app-prix> ?
ou peut être mis dans le composant app-prix comme je l'ai codé dans prix.component.html .

[Marco46]

Dans ton template à aucun moment je ne vois d'appel au composant. Il n'est donc pas invoqué.

Ne le prends pas mal mais tes questions sont vraiment de l'ordre des tutoriels, je t'invite à les faire plutôt que de partir à l'aveuglette.

[keokaz]

Merci de ta réponse, mais je ne comprend pas du premier coup comment réussir à récupérer la valeur voulu ...,

j'ai essayer ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<article #art (click)="donneArticle(art)"   class="recupe_moi_ce_qui_est_ici" >

dans le composant j'ai ma méthode:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  donneArticle(art){
    console.log(art);
  }

en cliquant sur la zone article, j'arrive à avoir tout le html il suffira de le décomposer pour récupérer .
par contre j'ai du faire un clique pour avoir toute la balise, comment on s'y prend pour faire un clique automatique.

[pterrat]

Comme dit Marco, revois tranquillement les tutoriels. Je te conseille cette tram :

- Déclaration d'un composant
- Utilisation d'un composant
- Passer un paramètre dans le composant (avec @Input)
- Faire appel à un event depuis ton composant (avec @Output)

Source des tutoriels : Anglais , Français

Est-ce que tu pourrais poster au fur et à mesure que tu avances dans le tutoriel pour qu'on puisse t'aider?

En espérant d'avoir aidé

[keokaz]

merci du tip,
j'ai saisi qu'il faut un événement pour pouvoir récupérer une valeur d'un attribut