我的路由器參數只適用於數字？

Question

我有一個組件，將從url獲取數據並將其傳遞給一個變量，但它只適用於傳遞數字而不是字符串。我想傳遞一個字符串。我怎麼做？

Cardview.comp.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute }  from '@angular/router'; 
import { Response } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 
import { Post, Area } from '../_models/index'; 
import { PostService, AreaService, HttpService} from '../_services/index'; 


@Component({ 
    templateUrl: 'cardView.component.html', 
}) 

export class CardViewComponent implements OnInit { 
    posts: Post[] = []; 
    areas: Area[] = []; 
    model: any = {}; 
    color = 'warn'; 
    checked: boolean; 
    editName: string; 
    private sub: any; 
    constructor(
    private postService: PostService, 
    private areaService: AreaService, 
    private httpService: HttpService, 
    private route: ActivatedRoute, 
    private router: Router 
) { 
    this.checked = this.areaService.isAreaChecked; 
    } 

    ngOnInit() { 
    document.getElementById('navB').style.display = 'none'; 
    this.sub = this.route 
     .params 
     .subscribe(params => { 
     let id = +params['id1']; 
     let id2 = +params['id2']; 
     console.log(id + 'as' + id2) //Only numbers work here otherwise returns NaN 
     }); 

     // get posts from secure api end point 
     this.postService.getPosts() 
      .subscribe(post => { 
       this.posts = post; 
      }); 
      this.areaService.getAreas() 
      .subscribe(area => { 
       this.areas = area; 
      }); 
    } 

    postComment() { 
     const text = { 
      'text': this.model.comment 
     }; 
     const body = JSON.stringify(text); 
     this.httpService.POST('/areas/' + this.areaService.currentAreaName + '/' + this.posts[0].id + '/', body) 
      .subscribe(
       data => console.log('Someone said something in the forest, but did anyone hear it?')); 
       this.model.comment = ''; 
       this.ngOnInit(); 
    } 
} 

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { LoginComponent } from './login/index'; 
import { HomeComponent } from './home/index'; 
import { ProfileComponent } from './profile/index'; 
import { CreatePostComponent } from './createPost/index'; 
import { UserPostsComponent } from './userposts/index'; 
import { RegisterComponent } from './register/index'; 
import { NotificationComponent } from './notification/index'; 
import { NavBarComponent } from './navBar/index'; 
import { CardViewComponent } from './cardView/index'; 
import { AuthGuard } from './_guards/index'; 

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent, canActivate: [AuthGuard] }, 
    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, 
    { path: 'post', component: CreatePostComponent, canActivate: [AuthGuard] }, 
    { path: 'cards', component: UserPostsComponent, canActivate: [AuthGuard] }, 
    { path: 'notifications', component: NotificationComponent, canActivate: [AuthGuard] }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'areas/:id1/:id2', component: CardViewComponent }, 
    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

Answer 1

當您使用ActivatedRoute你應該使用params.get()方法，是財產paramMap裏面獲取參數如下，

this.route.paramMap 
    .switchMap((params: ParamMap) =>{ 
     let id = +params.get('id1'); 
     let id2 = +params.get('id2'); 
     console.log(id + 'as' + id2; 
    });