将 :id 传递给服务
Passing :id to Service
我早 Angular 天,希望是简单的问题。
我正在使用 WordPress REST API 并尝试显示来自使用 posts?categories={ID HERE} 的类别的帖子列表,我的问题是我不确定如何从categories-list 到 posts-service.ts 将列出文章的组件称为 category-single.component.ts。
类别-list.component.html
<ul *ngFor="let category of categories">
<li><a (click)="selectCategory(category.id)">{{category.name}}</a>
</li>
</ul>
类别-list.component.ts
selectCategory(id) {
this.router.navigate(['/category', id]);
}
应用-routing.module.ts
{
path: 'category/:id',
component: CategorySingleComponent
}
帖子。service.ts
export class PostsService {
private _wpBase = "http://base.local/wp-json/wp/v2/";
constructor(private http: Http) {}
getPostList(): Observable < Post[] > {
return this.http
.get(this._wpBase + `posts?categories={ID GOES HERE}`)
.map((res: Response) => res.json());
}
}
重定向到所需路由后,您需要获取路由参数,如下所示,
export class CategorySingleComponent{
constructor( private route: ActivatedRoute,
private router: Router,
private postsService : PostsService ) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id']; // (+) converts string 'id' to a number
// this.postsService.getPostList(id).subscribe()...
});
}
}
另外,
getPostList(id:number): Observable < Post[] > { //<<<===changed
return this.http
.get(this._wpBase + `posts?categories={ID GOES HERE}`)
.map((res: Response) => res.json());
}
我早 Angular 天,希望是简单的问题。
我正在使用 WordPress REST API 并尝试显示来自使用 posts?categories={ID HERE} 的类别的帖子列表,我的问题是我不确定如何从categories-list 到 posts-service.ts 将列出文章的组件称为 category-single.component.ts。
类别-list.component.html
<ul *ngFor="let category of categories">
<li><a (click)="selectCategory(category.id)">{{category.name}}</a>
</li>
</ul>
类别-list.component.ts
selectCategory(id) {
this.router.navigate(['/category', id]);
}
应用-routing.module.ts
{
path: 'category/:id',
component: CategorySingleComponent
}
帖子。service.ts
export class PostsService {
private _wpBase = "http://base.local/wp-json/wp/v2/";
constructor(private http: Http) {}
getPostList(): Observable < Post[] > {
return this.http
.get(this._wpBase + `posts?categories={ID GOES HERE}`)
.map((res: Response) => res.json());
}
}
重定向到所需路由后,您需要获取路由参数,如下所示,
export class CategorySingleComponent{
constructor( private route: ActivatedRoute,
private router: Router,
private postsService : PostsService ) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id']; // (+) converts string 'id' to a number
// this.postsService.getPostList(id).subscribe()...
});
}
}
另外,
getPostList(id:number): Observable < Post[] > { //<<<===changed
return this.http
.get(this._wpBase + `posts?categories={ID GOES HERE}`)
.map((res: Response) => res.json());
}