Angular 我的路由器参数只适用于数字?
我有一个组件,它将从url获取数据并将其传递给变量,但它只在我传递数字而不是字符串时起作用。我想传一串。我该怎么做 Cardview.comp.tsAngular 我的路由器参数只适用于数字?,angular,typescript,Angular,Typescript,我有一个组件,它将从url获取数据并将其传递给变量,但它只在我传递数字而不是字符串时起作用。我想传一串。我该怎么做 Cardview.comp.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { Response } from '@angular/http'; import
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);
使用
ActivatedRoute
时,应使用属性paramMap
中的params.get()
方法获取参数,如下所示:
this.route.paramMap
.switchMap((params: ParamMap) =>{
let id = +params.get('id1');
let id2 = +params.get('id2');
console.log(id + 'as' + id2;
});
好吧,您正试图强制您的参数为number
let id=+params['id1'];设id2=+params['id2']代码>除非我误解了,这就是你如何使它工作的。是的,只需要删除+,这里是你创建的Post
类。请更新到post