Discussion :

[keokaz]

Bonjour, je chercher à transmettre une valeur depuis le parent vers l'enfant de l'enfant.

dans cette exemple la transmission d'une valeur vers l'enfant:

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
 
import { Component,ElementRef} from '@angular/core';
 
 
@Component({
  selector: 'app-root',
  template: `
      <app-page  [articleCourant]="choixArticle" ></app-page>
  `',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  choixArticle:number=0; //article 0 = home
  isHideContact:boolean = true;
 
 
  public constructor(){
 
  }
 
}

je souhaite envoyer le 0 dans le décorateur enfant qui est une page, voici sont component Page:

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
 
import { Component, OnInit, Input } from '@angular/core';
 
@Component({
  selector: 'app-page',
  template:`
  <h1> {{articleCourant}}</h1>
  <app-article></app-article>
  `,
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {
 
  @Input() articleCourant;
 
  constructor() { 
 
 
  }
 
  ngOnInit() {
  }
 
}

Ici pas de problème la valeur articleCourant est afficher à 0, par contre je souhaite transmettre au components app-article, comment je dois m'y prendre,
est t'on obligé de créer un attribut qui dans le composant et de faire la même chose ?

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
 
 
import { Component, OnInit, Input } from '@angular/core';
 
@Component({
  selector: 'app-page',
  template:`
     <h1> {{articleCourant}}</h1>
<app-article [afficheArticle] = "articleCourantSousEnfant"></app-article>
  `,
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {
 
  @Input() articleCourant;
   articleCourantSousEnfant:any;
  constructor() { 
    this. articleCourantSousEnfant = articleCourant;
 
  }
 
  ngOnInit() {
  }
 
}

Il y aurait t'il une astuce pour gérer la transmission de cette variable ? ou il n'y a pas le choix de passer par autre chose ?

merci d'avance de vos réponses

[Marco46]

Cf ce tutoriel : Angular Component Design: How to Avoid Custom Event Bubbling And Extraneous Properties in the Local Component Tree.

Si on résume le problème, lorsqu'on a une hiérarchie simple avec un parent et un enfant (A -> B), on peut passer les données du parent vers l'enfant via des propriétés. Si par contre on a un niveau supplémentaire dans la hiérarchie (A -> B -> C) il est conseillé de passer par un service pour faire passer les données de A vers C pour éviter de polluer le contrat d'interface de B avec des données qui ne le concerne pas.

Cf doc Angular pour la gestion via services.

[keokaz]

Merci pour la réponse je vais pour le moment aller à petite pas de l'enfant au parent

je tente d'envoyer le nom d'un menu vers sont parent avec @Output mais je n'y arrive pas,
voici mon menu.component.html

Code HTML :

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

1
2
3
4
5
6
7
8
<ul class="flex-container wrap">
  <a 
    *ngFor="let menu of menus" 
    class="flex-item menu" 
    (click)="selectMenuEvent($event)"
    >{{menu.name}}
  </a>
</ul>

je souhaite que si je clique sur un des menu (menu.name), je transmet cette chaîne menu sur son parent soit app.component.ts.
Voici le code du composant menu:

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
27
28
29
30
31
 
import { Component, OnInit,EventEmitter,Output } from '@angular/core';
import { Menu } from './menu.model';
 
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
 
export class MenuComponent implements OnInit {
 
  menus:any = [
    {"id":"1","name":"home"},
    {"id":"2","name":"service"},
  ];
 
  @Output("menuSelected") sendRecord:EventEmitter<any> = new EventEmitter();
 
  constructor( ) { 
  }
 
  selectMenuEvent(){
    console.log(this.menus);  //j'obtiens les 2 objet home et service, il me faudrait juste le menu courant
    this.sendRecord.emit(this.menus);
 
  }
  ngOnInit() {
  }
 
}

Ici le console.log(this.menu) me donne 2 objets, mais ici je souhaite que si je clique sur home, il m'affiche menu .

dans mon app.components voici comment je récupère la donnée que j'ai cliqué:

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
import { Component,ElementRef} from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  article:string='accueil'; //article 0 = home
  isHideContact:boolean = true;
  public menuSelectedData:any = "home";
 
  public constructor(){
 
  }
 
  getRecord(data:any):void{
    console.log(data);
    this.menuSelectedData = data;
  }
 
}

voici mon app.component.html

Code HTML :

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

1
2
3
4
5
6
7
<app-tete></app-tete>
<app-menu ></app-menu>
<h1>{{menuSelected}}</h1>
<div class="fin"></div>
<app-page  [(articleCourant)]="article" ></app-page>
<div class="fin"></div>
<app-footer class="page-footer"></app-footer>

comment transmettre correctement le menu auquel j'ai cliqué vers menuSelected ?

[pterrat]

Pourquoi ne pas faire un component qui s'appelle lui même? (Un component recursif) pour gérer ton menu