Discussion :

[keokaz]

Bonjour,

j'affiche une page qui présente un datepicker ainsi que des champs à sélectionner pour une plage d'horaire

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
<h1 >Prendre un rendez-vous</h1>
<h2>fil de la semaine</h2>
<app-semaine></app-semaine>
 
 
<h2>{{erreur}}</h2>
  <mat-form-field>
    <input matInput [(ngModel)]="_reserveDate.reserverAvecQui" placeholder="NOM | prénom ?" (change)="reserverAvecQui()">
  </mat-form-field>
  <span></span>
  <mat-form-field>
    <input matInput [(ngModel)]="_reserveDate.reserverWhy" placeholder="nom du rendez vous ?" (change)="reserverWhy()">
  </mat-form-field>
 
  <mat-form-field >
    <input matInput [matDatepicker]="picker" placeholder="Date du rendez-vous">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (selectedChanged)="reserverDate($event)"></mat-datepicker>
  </mat-form-field> 
 
<button *ngIf="boutonDemandeRDV" mat-raised-button (click)="sendRDV()">Prendre le rendez-vous</button>

le template enfant "app-semaine", affiche le jours et les plages des horaires dispo ou indispo,
j'aimerai que à chaque fois que la personne valide un rendez-vous avec le bouton valider, ce template enfant soit rafraîchit
pour revoir les jours et plages horaires qui vient d'être modifier.

Comment s'y prend t'on pour la recharger facilement?

j'ai essayer de faire un test simple en utilisant le routage:
voici ce que serais un template parent

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
<div class="page-header">
  <div class="container">
  <h1>Router Sample</h1>
  <div class="navLinks">
  <a [routerLink]="['/home']">Home</a>
  <a [routerLink]="['/about']">About Us</a>
  <a [routerLink]="['/contact']">Contact Us</a>
  |
  <a [routerLink]="['/products']">Products</a>
  <a [routerLink]="['/login']">Login</a>
  <a [routerLink]="['/protected']">Protected</a>
  </div>
  </div>
  </div>
  <div id="content">
  <div class="container">
  <router-outlet></router-outlet>
  </div>
  </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
21
22
23
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
 
  random;
 
  constructor(private router:Router) {
 
   }
 
  ngOnInit() {
    console.log(Math.random());
    this.random = Math.random();
 
  }
 
}

voici le template about:

Code html :

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

1
2
3
4
<h1>random : {{random}}</h1>
<p>
  about works!
</p>

Je me suis dit si j'appelle plusieurs fois about us en cliquant dessus, la valeur changerais,
mais il elle reste la même si on reste sur la même route, par contre si je clique sur autre part et que je clique sur about us
la valeur à changer.

il manque peut être autre chose pour que cela fonctionne ?

merci d'avance de vos réponses

[keokaz]

je suis arrivé a mes fin

https://stackblitz.com/edit/angular-...Fapp.module.ts