角度4路由參數捕獲爲undefined

我是Angular的新手。我試圖在localhost：4200/edit /：id上編輯一個項目，但我無法捕獲：id參數以從中獲取相應的編號（它應該是localhost：4200/edit/7之類的東西，例如）。當我輸出params.id到控制檯時，它總是顯示「未定義」。角度4路由參數捕獲爲undefined

我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); 
     } 
    ); 
    } 
}

來源

2017-08-27 Jocho Delgado

嘗試使用['id']訪問id，即console.log（params ['id']）; –

試過了，仍然沒有。 –

我不認爲這有助於在同一條路線上定義組件和子項。另請注意，您可以使用參數屬性來簡化您的定義，請參閱https://www.typescriptlang.org/docs/handbook/classes.html – jonrsharpe

根據官方Angular guide，使用params氣餒。相反，建議使用paramMap代替：

兩個較舊的屬性仍可用。他們不如他們的替身能力，氣餒，並可能在未來的Angular版本中被棄用。

params - 包含特定於路由的必需和可選參數的Observable。改用paramMap。

queryParams - 包含可用於所有路由的查詢參數的Observable。改用queryParamMap。

要使用paramMap，用以下內容替換您的ngOnInit：

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

我意識到這不是你的問題，直接修復，但我很感興趣，看看它是否適合你。我會把它寫成評論，但是它很難閱讀。

來源

2017-08-27 17:20:25

得到了什麼錯，或至少讓它工作。

改變了我的路由定義來：

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

顯然，用 '孩子' 確實是不好的。

來源

2017-08-27 17:53:23

同樣的事情發生在我身上。一旦我刪除了子參數，它就開始工作。 –

角度4路由參數捕獲爲undefined

回答

相關問題