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

我的路由器参数仅适用于数字？

1 个答案: