Angular 捕获为未定义的角度4路由参数

我是新来的。我试图在localhost:4200/edit/：id处编辑一个项目，但无法捕获：id参数以从中获取相应的数字（例如，它应该类似于localhost:4200/edit/7）。当我将params.id输出到控制台时，它总是显示“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]
})

我的MaterialEdit组件

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

该官员表示，不鼓励使用

params

。相反，建议使用：

两处较旧的房产仍然可用。它们的性能不如它们的替代品，不受欢迎，并且可能在未来的版本中被弃用

params-包含特定于路线的必需和可选参数的可观察参数。改用paramMap

queryParams-包含所有路由可用的查询参数的可观察对象。改用queryParamMap

要使用

paramMap

，请将您的

ngOnInit

替换为以下内容：

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

---

我意识到这并不能直接解决您的问题，但我有兴趣看看它是否适合您。我本想把它写下来作为一个评论，但它很难阅读。

知道哪里出了问题，或者至少让它起作用了

将我的路由定义更改为：

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

---

显然，使用“children”并不好。

尝试使用['id']ie console.log（params['id']）访问id；试过了，还是没用。我不认为它有助于定义同一路线上的组件和子组件。还请注意，您可以使用参数属性来简化定义，请参见您是否可以为您的问题创建plunker演示，这可以更好地了解仍然未定义的问题。我看到的大多数文档都强迫我使用routerLink，但我知道我们可以在它上面捕获/：id。哦，好吧，继续找