将猫鼬数据传递到角度4组件'详细信息'页面中？

Question

我很新的角4和猫鼬，我甚至没有积极的我正确地做到这一点。我有一个列出学校的页面。我可以将学校添加到数据库，当我点击其中一个名称（）时，我将它转到详细信息页面。我有像{ path: 'api/schools/:id', component: SchoolDetailComponent }设置在标签上的html模板中的路线，我有routerLink="/api/schools/{{school._id}}"，它成功地加载了带有正确的id号（显然特定于任何元素）的url http://localhost:3000/api/schools/592641e61e4e76cfda292b4a。我不确定是如何加载info该特定元素放入详细信息页面。

学校模式：

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。在上面的组件代码中注释掉了，我尝试过使用ActivatedRoute，但它似乎并不想工作。我试着通过谷歌，堆栈溢出，github，youtube查找，似乎无法使其工作。任何帮助将不胜感激。谢谢！

Answer 1

尝试与activatedRoute.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) 

}