0
我对angular 2和数据库中发布的帖子做了一个简单的博客。我在后端使用nodejs + express来从db.I获取数据。我的帖子组件中包含来自db的router-outlet中的帖子，以及来自db的具有帖子类别的单独类别组件。我想实现的是有能力通过点击类别来筛选所选类别的帖子。任何想法如何做到？Angular 2+按参数对数据列表进行排序
Node.js的routes.js
app.get('/admin/posts', function (req, res) {
sess = req.session;
console.log('sess.userData', sess.userData);
if (!sess.userData) {
sess.userData = {
id: [someId],
email: [someEmail],
name: [someName]
};
}
if (sess.userData) {
//get all posts when user checked
Post.getAllPosts(function (err, rows, fields) {
if (err) throw err;
return res.json(rows);
})
} else {
res.redirect('/');
}
});
//get posts by category, admin mode
app.get('/admin/posts/:category', function (req, res) {
sess = req.session;
if (!sess.userData) {
sess.userData = {
id: [someId],
email: [someEmail],
name: [someName]
};
}
if (sess.userData) {
//get all posts when user checked
Post.findByCategory(req.params.category, function (err, rows,
fields) {
searchedCategory = req.params.category;
existingCategory = rows[0].category;
if (rows.length && existingCategory === searchedCategory) {
// res.json(rows[0].tags);
return res.json(rows);
} else
return;
})
} else {
res.redirect('/');
}
});
//get all posts categories
app.get('/admin/post_categories', function (req, res) {
sess = req.session;
if (!sess.userData) {
sess.userData = {
id: [someId],
email: [someEmail],
name: [someName]
};
}
if (sess.userData) {
Post.getAllCategories(function (err, rows, fields) {
if (err) throw err;
return res.json(rows);
})
} else {
res.redirect('/');
}
});
post.component.html
<article class="post-block">
<section *ngFor="let post of posts" class="post">
<article class="post__upper-block">
<section class="post__img">
<img class="post__img" src = "../../assets{{ post.titleImage }}" alt =
"post-img">
</section>
<section class="post__content">
<h2 class="post-title">{{ post.title }}</h2>
<p class="post-text">{{ post.shortContent }}</p>
</section>
<section class="post__operations">
<input type="button" value="Опубликован" class="post__btn post__btn--
active">
<input type="button" value="В работе" class="post__btn">
<input type="button" value="Редактировать" class="post__btn">
</section>
</article>
</section>
</article>
post.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class PostService {
private _url = "http://localhost:3000/admin/posts";
constructor(private _http: Http) { }
getPosts(){
return this._http.get(this._url)
.map(res => res.json())
}
}
post.component.ts
import { Component, OnInit } from '@angular/core';
import { PostService } from '../../services/post.service';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-post',
templateUrl: './post.component.html',
styleUrls: ['./post.component.scss'],
providers: [PostService]
})
export class PostComponent implements OnInit {
posts: any[];
categories: any[];
constructor(private _postService: PostService) { }
ngOnInit() {
this._postService.getPosts()
.subscribe(posts => this.posts = posts);
}
}
category.component.html
的一部分<article class="sidebar__categories">
<h3 class="categories-header">Разделы</h3>
<ul class="categories-ul">
<li *ngFor="let category of categories" class="categories-ul__item">
<a>{{ category.category }}</a>
</li>
</ul>
</article>
category.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class CategoryService {
private _url = "http://localhost:3000/admin/post_categories";
constructor(private _http: Http) { }
getCategories(){
console.log("get-categories service works");
return this._http.get(this._url)
.map(res => res.json())
}
}
category.component.ts
import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../../services/category.service';
import { PostService } from '../../services/post.service';
import 'rxjs/add/operator/map';
import { PostComponent } from '../post/post.component';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.scss'],
providers: [CategoryService, PostService]
})
export class CategoriesComponent implements OnInit {
categories: any[];
posts: any[];
constructor(private _categoryService: CategoryService,
private _postService: PostService) { }
ngOnInit() {
this._categoryService.getCategories()
.subscribe(categories => this.categories = categories);
}
}
app.routes.ts
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { CategoriesComponent } from
'./components/categories/categories.component';
import { PostComponent } from './components/post/post.component';
export const AppRoutes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'authors-columns', component: AuthorsColumnsComponent },
{ path: 'settings', component: SettingsComponent },
// {path: 'admin/posts/:category', component: DashboardComponent},
{
path: 'admin/dashboard/:category',
component: DashboardComponent,
resolve: {
category: 'category'
}
}
]
非常感谢，我会试试看 – Sylvanas9189