Bonjour, je développe une petite application angular. J'utilise un module de routing:

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 { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AppProduitImmobilierDetailsComponent} from './app-produit-immobilier-details/app-produit-immobilier-details.component';
    import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';
 
    const routes: Routes = [{
        path: '',
        redirectTo: '/listproduitimmobilier',
        pathMatch: 'full' }, {
          path: 'listproduitimmobilier',
          component: AppListProduitImmobilierComponent,
          children: [
            {
              path: 'details/:id',
              component: AppProduitImmobilierDetailsComponent
            }
          ]
      }];
 
    @NgModule({
      imports: [RouterModule.forRoot(routes,
          { enableTracing: true })],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
Je l'importe dans AppModule

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
32
33
34
 
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {CommonModule} from '@angular/common';
    import { AppRoutingModule } from './app-routing.module';
    import { MaterialModule } from './material/material.module';
    import { FlexLayoutModule } from '@angular/flex-layout';
    import { HttpClientModule } from '@angular/common/http';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component';
    import {enableProdMode} from '@angular/core';
    import 'hammerjs';
    import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';
    enableProdMode();
    @NgModule({
      declarations: [
        AppComponent,
        AppProduitImmobilierDetailsComponent,
        AppListProduitImmobilierComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FlexLayoutModule,
        CommonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

dans AppListProduitImmobilierComponent, je navigue vers la route enfant correspondant au component AppProduitImmobilierDetailsComponent

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
       goToDetailsView(annonce: ProduitImmobilierDTO) {
          this.router.navigate(['/listproduitimmobilier/details/' + annonce.id]);
        }
Mais à la place d'aller vers la route enfant correspondant au component AppProduitImmobilierDetailsComponent component, il reste sur la vue parent correspondant au component AppListProduitImmobilierComponent. Pourtant l'url est bien
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
    http://localhost:4200/listproduitimmobilier/details/1
ce qui est l'url de la vue enfant. Pouvez vous m'aider ?