app.component看起来像这样
<li><a [routerLink]="['/teams']" [queryParams]="{ division: '1'}">View/Create Div 1 Teams </a></li>
我的team.component看起来像这样&gt;
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import {URLSearchParams} from '@angular/http';
@Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
teams: any;
division: string;
constructor(private router: Router, private route: ActivatedRoute,
private http: HttpClient) { }
ngOnInit() {
this.route.queryParams
.subscribe(params => {
this.division = params.division;
});
console.log(this.division);
//this.http.get('/team').subscribe(data => { // this gets all teams ok
this.http
.get('/team/'+this.division)
.subscribe
(data => {
this.teams = data;
});
}
deleteTeam(id) {
this.http.delete('/team/'+id)
.subscribe(res => {
location.reload();
//this.router.navigate(['/teams']);
}, (err) => {
console.log(err);
}
);
}
}**
我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TeamComponent } from './team/team.component';
import { TeamCreateComponent } from './team-create/team-create.component';
import { TeamEditComponent } from './team-edit/team-edit.component';
const appRoutes: Routes = [
{
path: 'teams',
component: TeamComponent,
data: { title: 'Team List' }
},
{
path: 'teams/:division',
component: TeamComponent,
data: { title: 'Team List' }
},
@NgModule({
declarations: [
AppComponent,
TeamComponent,
],
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot(),
FormsModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
team.js
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Team = require('../models/Team.js');
/* GET ALL TeamS */
router.get('/', function(req, res, next) {
console.log("just GET");
Team.find(function (err, products) {
if (err) return next(err);
res.json(products);
});
});
router.get('/:division', function(req, res, next) {
console.log("HMMMMMM");
Team.find(req.params.id, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
router.get('/:id', function(req, res, next) {
console.log("ID");
Team.findById(req.params.id, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
module.exports = router;