Discussion :

[Whisper40]

Bonjour à tous !
Aujourd'hui j'ai un besoin un peu spécial, en tout cas il me semble..
Mon besoin :
J'ai un tableau avec des cellules dedans. Sur l'une des cellules j'appelle la fonction

Code :

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

(click)='getAllHistoryOfComponentFromNamespace(element.namespacename, element.servicename)'

Cette fonction me génère un nouveau tableau ( un second )
Une fois le tableau affichée, je peut faire une nouvelle chose, inserer des dates dans un date picker et lancer une nouvelle recherche qui doit modifier la data du tableau en dessous.

Le problème : Ce n'est pas le fait d'update la data qui va me poser problème.
C'est que une fois que le tableau est généré, le (element.namespacename, element.servicename) je ne l'ai plus à l'endroit ou est positionné mon datepicker.
J'ai besoin de ces paramètres une nouvelle fois dans la fonction "Test(...,...)" en théorie.

Mon idée : Lorsque j'ai les deux paramètres en ma possession, les définir en variables utilisables dans tout mon component.
En Php c'est faisable, en Angular ?
Ou alors existe t-il une manière plus logique ?

Code html :

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
<ng-container matColumnDef="consulter">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Consulter les déploiements du composant</mat-header-cell>
                    <mat-cell *matCellDef="let element"> 
                        <button mat-icon-button color="warn" (click)='getAllHistoryOfComponentFromNamespace(element.namespacename, element.servicename)' aria-label="Récupération des déploiements du composant">
                            <mat-icon>search</mat-icon>
                        </button>
                    </mat-cell>    
            </ng-container>
 
 
 
....
....
<mat-card-content *ngIf='dataSourceTwo.data.length > 0'>
            <mat-card-title>Liste des déploiement du composant</mat-card-title>
            <mat-card-content class="date-picker">
            <mat-form-field appearance="fill" >
                <mat-label>Entrez un interval de temps</mat-label>
                    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
                        <input matStartDate placeholder="Date début" formControlName="start">
                        <input matEndDate placeholder="Date Fin" formControlName="end">
                </mat-date-range-input>  
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-date-range-picker #picker></mat-date-range-picker>
 
            </mat-form-field>
            <div class="button-row align-center">
                <button mat-raised-button color="accent" matTooltip="La recherche est possible avec ou sans dates d'indiquées" matTooltipPosition="above"  (click)="Test()">Lancer la recherche</button> <-- Les dates sont récupérees dans un form côté component--!>
                <button mat-raised-button color="accent" matTooltip="Supprimer les dates saisies" matTooltipPosition="above"  (click)="resetFormDatePicker()">Reset</button>
            </div>
            </mat-card-content>

[dukoid]

Code :

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

1
2
3
4
5
6
7
8
 
namespacename: string;
servicename: string;
 
getAllHistoryOfComponentFromNamespace(namespacename, servicename) {
  this.servicename = namespacename;
  this.servicename = servicename;
}

ainsi tu as accès à this.servicename dans tous le composant !

[Whisper40]

Ok parfait merci, j'en conclu qu'une variable globale est le plus adapté

[dukoid]

global est un peu fort, disons que cette variable est disponible seulement au niveau du composant


après, on peut vouloir utiliser une variable entre plusieurs composants

(1) 1ere technique: "service"

plusieurs composants se partagent un "service" ou l'on met des variables..
ainsi les composants set ou get les variables de ce service...


(2) 2eme technique: observable

pour cela on utilise: "subject" rxjs + service

on met un subject dans un service

les composants souscrit au subject du service
et quand un composant envoi une donnée au sujet
les composants qui ont souscrit reçoivent la donnée