モンゴーズデータを角度4の 'detail'ページに渡しますか？

Question

私は角4とマングースには非常に新しいので、私はこれも正しくしています。私は学校を挙げるページを持っています。私はデータベースに学校を追加することができます。名前（）の1つをクリックすると、詳細ページに移動します。私はのようなルートを設定しています。私はrouterLink="/api/schools/{{school._id}}"というタグのhtmlテンプレートを正しく読み込みます。正しい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; 

学校詳細コンポーネント：私はHTMLでを呼び出すようにしようとしているHTMLで

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) 
    // ); 
    // } 
} 

。上のコンポーネントコードでコメントアウトしたところ、私はActivatedRouteで遊んでみましたが、うまく動作しないようです。私はGoogle、スタックのオーバーフロー、github、YouTubeを見てみると、それを動作させるように見えることはできませんでした。どんな助けでも大歓迎です。ありがとう！

Answer 1

activateRoute.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) 

}