将猫鼬数据传递到 Angular 4 组件“详细信息”页面？
Posted
技术标签:
【中文标题】将猫鼬数据传递到 Angular 4 组件“详细信息”页面？【英文标题】：Pass mongoose data into an angular 4 component 'detail' page? 【发布时间】：2017-10-25 14:45:04 【问题描述】：我对 angular 4 和 mongoose 很陌生，我什至不肯定我做得对。我有一个列出学校的页面。我可以将学校添加到数据库中，当我单击其中一个名称 (school.name) 时，我会将其转到详细信息页面。我在标签上的 html 模板中设置了类似 path: 'api/schools/:id', component: SchoolDetailComponent 的路线，我有routerLink="/api/schools/school._id"，它成功地加载了带有正确ID 号的url http://localhost:3000/api/schools/592641e61e4e76cfda292b4a（显然特定于任何元素。）我不确定的是如何将该特定元素的信息加载到详细信息页面中。
学校架构：
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ObjectId = mongoose.Schema.Types.ObjectId;
var schoolsSchema = new Schema(
// _id
name: type: String, required: true ,
wave: type: Number, default: 0 , // of questions sent out
questionCount: type: Number, default: 0 ,
date: type: Date, default: Date.now , // created
phaseGate: type: Number, default: 0,
disabled: type: Boolean, default: false
);
// Export the Mongoose model
module.exports = mongoose.model('School', schoolsSchema);
API：
var router = require('express').Router();
var School = require('../models/schools');
var User = require('../models/users');
var lock = require('./api-lock');
// server routes thru /api/schools/ path
// api/schools/ when calling from client
// SCHOOLS/ ROUTE >>>>>>>>>>>>
router.route('/')
// GET REQUEST
.get(lock.requireAdmin, (req, res) =>
School
.find('disabled': $in: [false, null]) // find all Schools
.sort('-date')
.exec((err, schools) =>
if(err)
res.json(500, msg: "error");
res.json(schools);
);
)
// POST REQUEST
.post(lock.requireAdmin, (req, res) =>
// create new school profile
School.create(req.body, (err, school) =>
if(err)
return res.json(msg: "error");
res.json(school);
);
);
// SCHOOLS/WAVE/ ROUTE >>>>>>>>>>>>
router.route('/wave/update/')
// PUT REQUEST
// update wave count on school
.put(lock.requireAdmin, (req, res) =>
var schoolId = req.body._id;
School
.findOneAndUpdate(
_id: schoolId , // find indv School
$inc: wave: 1, // replace name
new: true,
(err, school) =>
res.json(school);
)
);
// SCHOOLS/:SCHOOL_ID ROUTE >>>>>>>>>>>>
router.route('/:id')
// GET REQUEST
.get(lock.requireSchoolAdmin, (req, res) =>
School
.findById(
_id: req.params.school_id, // find indv School
//disabled: $in: [false, null]
)
.select()
.exec((err, school) =>
if(err)
res.status(500).send('School not found.')
res.json(school);
);
)
// PUT REQUEST
.put(lock.requireAdmin, (req, res) =>
console.log(req);
School
.findOneAndUpdate(
_id: req.params.school_id , // find indv School
$set: name: req.body.name , // replace name
(err, school) =>
res.json(school);
)
)
// SCHOOLS/:SCHOOL_ID ROUTE >>>>>>>>>>>>
router.route('/phase/update/')
// PUT REQUEST
// Update school phaseGate
.put(lock.requireAdmin, (req, res) =>
console.log(req);
School
.findOneAndUpdate(
_id: req.params.school_id , // find indv School
$inc: "phaseGate": 1 , // replace name
(err, school) =>
res.json(school);
)
)
// SCHOOLS/COUNT/TOTAL/ ROUTE >>>>>>>>>>>>
router.route('/count/total/')
// GET REQUEST
.get(lock.requireAdmin, (req, res) =>
School
.count() // find School count total
.exec((err, count) =>
res.json(count);
);
);
module.exports = router;
学校详细信息组件：
import Component, OnInit from '@angular/core';
import Http from '@angular/http';
import FormGroup, FormControl, Validators, FormBuilder from '@angular/forms';
import ActivatedRoute, Params from '@angular/router';
import SchoolService from '../services/school.service';
@Component(
selector: 'app-school-detail',
templateUrl: './school-detail.component.html',
styleUrls: ['./school-detail.component.css']
)
export class SchoolDetailComponent implements OnInit
schools = [];
school = ;
admins = [];
admin = ;
constructor(private http: Http,
private schoolService: SchoolService,
private userService: UserService,
private formBuilder: FormBuilder,
private activatedRoute: ActivatedRoute)
// route.snapshot.params['id'];
// console.log('id');
ngOnInit()
this.getSchools();
// this.getSchool();
//
console.log(this.school);
);
// this.activatedRoute.params.subscribe((params: Params) =>
// let schoolId = params['schoolId'];
// console.log(schoolId);
// );
// let SchoolId = this.route.snapshot.params["SchoolId"];
// console.log(SchoolId);
//schools
getSchools()
this.schoolService.getSchools().subscribe(
data => this.schools = data,
error => console.log(error),
// () => this.isLoading = false
);
// getSchool()
// this.schoolService.getSchool().subscribe(
// data => this.school = data,
// error => console.log("getSchool" + error),
// // () => this.isLoading = false
//
// );
// console.log(this.school)
//
// getSchool(school)
//
// this.schoolService.getSchools(school).subscribe(
// res =>
// const pos = this.schools(school._id);
// // console.log(this.schools.map(elem => return elem._id; ).indexOf(school._id));
// console.log(school._id);
// // this.schools.splice(pos, 1);
//
// // console.log(this.schools);
// // this.toast.setMessage('item deleted successfully.', 'success');
// ,
// error => console.log(error)
// );
//
在 html 中，我试图在 html 中调用 school.name。在上面的组件代码中注释掉了，我尝试过使用 ActivatedRoute，但它似乎不想工作。我试过浏览谷歌、堆栈溢出、github、youtube，但似乎无法让它工作。任何帮助将不胜感激。谢谢！
【问题讨论】：
【参考方案1】：尝试激活Route.snapshot.params['id'];
public schoolname: string;
constructor(private http: Http,private schoolService: SchoolService,private userService: UserService,private formBuilder: FormBuilder,
private activatedRoute: ActivatedRoute)
this.schoolname=activatedRoute.snapshot.params['id'];
ngOnInit()
console.log(this.schoolname)
【讨论】：
你真是个天才，谢谢！那么接下来我是否会通过类似`getSchool(schoolname) this.schoolService.getSchool().subscribe(data => this.school = data,)` 来从对象中获取其余信息？ （不确定这是否是正确的语法） this.schoolService.getSchool().subscribe(data => console.log(data) );以上是关于将猫鼬数据传递到 Angular 4 组件“详细信息”页面？的主要内容，如果未能解决你的问题，请参考以下文章