Question

nvm 0.31.0：npm 3.10.3：Node.js 6.6.0

来自login.component.ts

gotoProfile(id:number):void {
    let link = ['/profile'];
    console.log("Routing to /profile/"+id);
    this.router.navigate(link, id);
}

控制台：

Routing to /profile/1

来自profile.component.ts

import { Router, ActivatedRoute, Params } from '@angular/router';

constructor(private route:ActivatedRoute,
                private router:Router,
                private profileService:ProfileService) {
    }

ngOnInit():void {
this.route.params
        .subscribe(params => {
            let id = params['id'];
            console.log("id " + id);
            this.profileService.getProfileById(id)
            .subscribe(
                p => this.model = p,
                err => this.handleError(err),
                () => console.log("getting profile complete")
            );
    });

来自控制台：

id undefined

来自app.routing.ts

path: 'profile/:id',
component: ProfileComponent

如果我在浏览器中输入此内容：http://localhost:3000/profile/1 控制台：

id 1

所以我在这里缺少什么:)

Answer 1

subscribe()方法会监视URL中的更改，但在您的登录组件中，您将直接使用路由器进行导航。

从router docs开始，以下代码段显示了如何以这种方式解析参数。

ngOnInit() {
  this.route.params.forEach((params: Params) => {
  let id = +params['id']; // (+) converts string 'id' to a number
   this.service.getHero(id).then(hero => this.hero = hero);
 });
}

但是，直接输入URL将触发subscribe()方法，因为它直接观察URL，并解释了为什么这样做有效，并且您在控制台日志中看到它。

Angular 2 Routing - 获取路由参数 - typescript

1 个答案: