角度4のルーティングパラメータが定義されていないとしてキャプチャされました

Question

私はAngularで新しいです。 localhost：4200/edit /：idでアイテムを編集しようとしていますが、idパラメータを取得できません（localhost：4200/edit/7のようなものです）例えば）。 params.idをコンソールに出力すると、常に「未定義」と表示されます。公式Angular guideによると、paramsの使用が推奨され

マイ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] 
}) 

マイ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

。代わりに、代わりにparamMapを使用することをお勧めします。

2つの古いプロパティは引き続き使用できます。彼らは彼らの交換よりも能力が低く、落胆し、将来のAngularバージョンでは廃止される可能性があります。

params - 経路に固有の必須パラメータとオプションパラメータを含むObservable。代わりにparamMapを使用してください。

queryParams - すべてのルートで使用可能なクエリパラメータを含むObservable。代わりにqueryParamMapを使用してください。

、paramMapを使用し、以下を使用してngOnInitを置き換えるために：

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

私はこれがあなたの問題の直接の修正ではありません実現が、私はそれがあなたのために働くかどうかを確認するために興味があります。私はこれをコメントとして書いたが、読むのは難しいだろう。

Answer 2

何が間違っているのか、あるいは少なくともそれを働かせてください。私のルーティング定義を変更

：どうやら

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

は、 '子供' を使用すると、それはいいません。