使用Angular2从url中提取ID

您好我正在尝试使用Angular2提取url的id部分。使用Angular2从url中提取ID

http://localhost:3000/item/187809

我一直ActiveRoute玩弄内的OnInit但没有运气

this.route.queryParams.forEach((params: any) => { 
    console.log("QUERYPARAMS"); 
    console.log(params); 
});

也试过订阅路线改变这样

this.routeSub = this.route.queryParams.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

但params为只是一个空的对象。

我定义的路由作为一个懒惰的路线是这样

{ 
path: item', 
children: [ 
    { path: ':id', loadChildren: './item/item.module#ItemModule' }, 
] 
},

我认为问题是，我有一个头组件和保持延迟加载路由子主要成分。我正在试图加载标头组件中的id。

任何想法缺少什么？

来源

2017-03-16 doorman

我怀疑问题是您使用queryParams而不是仅仅使用params。

params：包含路线特定的必需和可选参数的Observable。

queryParams：包含所有路由可用的查询参数的Observable。

所以试试这个：

this.route.params.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

来源

2017-03-16 16:04:47 MattEnth

this.routeSub = this.route.params.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

来源

2017-03-16 16:04:52

1）确保你已经配置了预期id作为像这样参数的路线：

{path: 'item/:id', component: SomeItemComponent}

2）您需要导入ActivatedRoute（不是ActiveRoute）并将其注入到组件构造函数中：

constructor(private route: ActivatedRoute) { }

3）内部ngOnInit在同一组件，您可以通过订阅像这样访问的params观察到的数据：

ngOnInit() { 
    this.route.params.subscribe(params => { 
     console.log(params) //log the entire params object 
     console.log(params['id']) //log the value of id 
    }); 
    }

来源

2017-03-16 17:41:14

感谢您的建议，我完全像这样，除了路线是懒加载看到更新的问题。但没有运气，如果我在chrome中打印params属性，它会给我一个奇怪的Object __proto__：Object – doorman

我知道我是一个有点晚了回复，只是在如果您仍遇到问题，请查看Angular文档。

angular routing tutorial

看一看该链接的例子。

开始通过导入ActivatedRoute：

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

然后注入其在构造

constructor(private route: ActivatedRoute) {}

而且在OnInit中（）

ngOnInit(): void { 
    const id = this.route.snapshot.paramMap.get('id'); 
}

和这样你就不需要直接担心任何观察对象。

希望这可以帮助你。

来源

2018-03-09 17:09:56 cgiacomi

使用Angular2从url中提取ID

回答

相关问题