Angular 4 paramètres de routage capturés comme non définis

Question

Je suis nouveau chez Angular. J'essaye d'éditer un item à localhost: 4200/edit /: id mais je ne peux pas capturer le: id param pour aller chercher le nombre correspondant (c'est supposé être quelque chose comme localhost: 4200/edit/7, par exemple). Lorsque je publie les params.id sur la console, il affiche toujours "non défini".

Mes app.module.ts

... 
import { RouterModule} from '@angular/router'; 

const routes = [ 
{ path: '', component: NavigateComponent }, 
{ path: 'field', component: FieldComponent }, 
{ path: 'book', component: MaterialFullComponent, children: [ 
    { path: '', redirectTo: '', pathMatch: 'full' }, 
    { path: ':id_book', component: MaterialFullComponent } 
] }, 
{ path: 'edit', component: MaterialEditComponent, children: [ 
    { path: '', redirectTo: '', pathMatch: 'full' }, 
    { path: 'new', component: MaterialEditComponent }, 
    { path: ':id', component: MaterialEditComponent } 
] }, 
{ path: '**', redirectTo: '/'} 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    AppLoginComponent, 
    NavigateComponent, 
    MaterialEditComponent, 
    MaterialFullComponent, 
    FieldComponent, 
    MaterialComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot(routes) 
    ], 
    providers: [ 
    MarcService, 
    BookService, 
    BookDetailService 
    ], 
    bootstrap: [AppComponent] 
}) 

Mon MaterialEditComponent

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { BookService } from '../book.service'; 

@Component({ 
    selector: 'app-material-edit', 
    templateUrl: './material-edit.component.html', 
    styleUrls: ['./material-edit.component.css'] 
}) 

export class MaterialEditComponent implements OnInit { 
    activatedRoute: ActivatedRoute; 
    bookService: BookService; 
    selectedBook = { id_book: null, 
       numero_ejemplares: null, 
       autor: '', 
       titulo: '', 
       editorial: '', 
       fecha_publicacion: '', 
       portada: '' 
    }; 

    constructor(activatedRoute: ActivatedRoute, bookService: BookService) { 
    this.activatedRoute = activatedRoute; 
    this.bookService = bookService; 
    } 

    ngOnInit() { 
    this.activatedRoute.params.subscribe(
     (params) => { 
     console.log(params.id); 
     } 
    ); 
    } 
} 

Answer 1

Selon le Angular guide officiel, l'utilisation de params est découragée. Au lieu de cela, la suggestion est d'utiliser paramMap à la place:

Deux anciennes propriétés sont toujours disponibles. Ils sont moins capables que leurs remplaçants, découragés, et peuvent être déconseillés dans une future version angulaire. Params - Un observable qui contient les paramètres obligatoires et facultatifs spécifiques à l'itinéraire. Utilisez plutôt paramMap. QueryParams - Observable qui contient les paramètres de requête disponibles pour toutes les routes. Utilisez plutôt queryParamMap.

Pour utiliser paramMap, remplacer ngOnInit ce qui suit:

ngOnInit() { 
    this.activatedRoute.paramMap.subscribe(params => { 
    console.log(params.get('id')); 
    }); 
} 

Je sais que ce n'est pas une solution directe pour votre question, mais je suis curieux de voir si cela fonctionne pour vous. J'aurais écrit ceci comme un commentaire mais cela aurait été difficile à lire.

Answer 2

Vous avez obtenu ce qui n'allait pas, ou du moins vous l'avez mis au travail.

mes définitions de Changé routage pour:

const routes = [ 
    { path: '', component: NavigateComponent }, 
    { path: 'field', component: FieldComponent }, 
    { path: 'book/:id_book', component: MaterialEditComponent }, 
    { path: 'edit/:id', component: MaterialEditComponent }, 
    { path: '**', redirectTo: '/'} 
]; 

Apparemment, en utilisant les 'enfants'-t-il pas bon.