[英]Fetching whole data passing id in route Angular 2
i am new in angular 2! 我是角度2的新手!
I want to fetch data after i click on the title. 我想在点击标题后获取数据。 i am passing id in routes.
我在路线中传递ID。 i am adding my routes file, my components file and my html file.
我要添加我的路线文件,我的组件文件和我的html文件。
**Routes : ** **路线:**
const routes : Routes = [
{path: '' , redirectTo : '/blog' , pathMatch : 'full'},
{path: 'blog' , component: BlogsComponent},
{path: 'blog/:id', component: BlogDetailComponent},
{path: '**', component: PageNotFoundComponent}
];
blogs.component.ts blogs.component.ts
import { Component, OnInit } from '@angular/core';
import {BlogService} from "../services/blog.service";
import {Router, ActivatedRoute, Params} from "@angular/router";
import {Blog} from "../blog";
@Component({
selector: 'app-blogs',
template : `
<h1>My Blog</h1>
<ul>
<li *ngFor="let blog of blogs"
[class.selected]="blog === selectedHero"
(click)="onSelect(blog)" [routerLink]="['/blog', blog.id]">
<h3 class="badge">{{blog.title}} ~ Written By: User-{{blog.userId}}</h3>
</li>
</ul>
`
})
export class BlogsComponent implements OnInit {
public errorMessage: string;
blogs: Blog[];
selectedHero: Blog;
constructor(private _blogService : BlogService, private _router: Router , private _activatedRoute : ActivatedRoute) {}
onSelect(blog){
this._router.navigate(['/blog' , blog.id])
}
ngOnInit() {
console.log('I am in BlogsComponent');
this._blogService.getBlog()
.subscribe( resBlogData => this.blogs = resBlogData ,
resBlogError => this.errorMessage = resBlogError
);
}
}
And 和
blog-detail.component.ts 博客,detail.component.ts
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from "@angular/router";
import {BlogService} from "../services/blog.service";
@Component({
// selector: 'app-blog-detail',
template: `
<p>
You Selected Blog with Id = {{blogId}}
</p>
`
})
export class BlogDetailComponent implements OnInit {
public blogId;
public blogTitle;
public blog;
constructor( private _activatedRoute: ActivatedRoute , private _blogService : BlogService) { }
ngOnInit(): void {
this._activatedRoute.params.subscribe((params: Params)=>{
let id = parseInt(params['id']);
let title = params['title'];
this.blogId = id;
this.blogTitle = title;
console.log( 'title : ' + this._activatedRoute.snapshot.data['title']);
});
}
}
for now i have consoled value of title. 现在,我已经安慰了title的值。 But is is undefined.
但是是不确定的。 Please, tell me where i am going wrong?
请告诉我我要去哪里错了?
You only have id parameter in url {path: 'blog/**:id**'
您在url
{path: 'blog/**:id**'
只有id参数
but you are trying to get title parameter there is no parameter title. 但是您尝试获取标题参数,没有参数标题。
let title = params['title'];
Also this one this._activatedRoute.snapshot.data['title']);
也是这个
this._activatedRoute.snapshot.data['title']);
there is no title data 没有标题数据
You can get your id with this._activatedRoute.snapshot.paramMap.get('id'); 您可以使用this._activatedRoute.snapshot.paramMap.get('id');获得您的ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.