Discussion :

[flamant]

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 ?

[flamant]

Re bonjour, j'ai trouvé une explication
Etant donné que la route de détails est un enfant de la route de liste, c'est bien ce qui se passe: j'aurais été censé d'avoir une directive router-outlet dans le modèle de la vue liste, et c'est là que la vue des détails aurait été affichée. Si je souhaite quitter la vue en liste, la route de détail ne doit pas être un enfant de la route en liste.