this.route.snapshot.params.get 不是函数

Question

我是 Angular 新手。我正在构建一个 Angular 应用程序，我想从组件路由中获取参数。我只有 1 个组件。因此，当我转到 localhost:4200 时，我想打开我的组件，但是当我转到 localhost:4200/v1/5 时，我希望我的组件打开并获取数字 5，然后用 console.log 记录它。我从标题中得到错误，但我不知道为什么：

app.component.ts：

import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, NgModule } from '@angular/core';
import { RacvaService } from './racva.service';
import {Router} from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';

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


export class AppComponent implements OnInit{
  title = 'RacveApp1';
  event:any;
  public racva: any;

  constructor(private route: ActivatedRoute){}

  ngOnInit(){
    let racva_id = parseInt(this.route.snapshot.params.get('id'));
    this.racva = racva_id;
    console.log(this.racva);
    }
  }
}

应用程序路由.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: 'v1/:id', component: AppComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

export const routingComponents = [ AppComponent ];

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbPaginationModule,
    NgbAlertModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

有2种方法

1 和推荐

订阅 queryParams，以便每次更改时您都会获得更新的值

import { ActivatedRoute } from '@angular/router';

constructor(private route:ActivatedRoute) {
  // your code
}

ngOnInit() {
    this.route.queryParams.subscribe(params => {
        this.id = params['id'];
    });
}

文档：https://angular.io/guide/router#getting-route-information

2：在组件安装时仅获取一次

this.route.snapshot.paramMap.get('id')

根据您的要求，您可以选择其中之一。我看到的#1 的唯一优点是，由于您订阅了参数更改，因此它可能有助于使用参数进行异步调用。