[Angular 4] Est-il possible de binder une valeur dans un sous enfant ?

Version imprimable

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:

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:

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:

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 :)

02/10/2017, 12h01
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.

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:

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:

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:

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:

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 ?

06/10/2017, 11h59
pterrat

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