export class Comment{

     id:number;

     userName:string;

     content:string;

     blogId:number;

 }

 import {Comment} from './comment'

 export let Comments:Comment[]=[];

 export class CommentService

 {

     public AddComment(com:Comment)

     {

         com.id=this.GetMaxId();

         Comments.push(com);

     }

     public GetBlogComments(blogId:number):Comment[]

     {

         return Comments.filter(x=>x.blogId==blogId);

     }

     private GetMaxId():number

     {

         var maxId=1;

         Comments.forEach(x=>{

             if(x.id>maxId)

               maxId=x.id;

          });

          return maxId;

     }

 }

 import { NgModule }             from '@angular/core';

 import { RouterModule, Routes } from '@angular/router';

 import { CommentComponent }   from './comment/comment.component';

 import { ArticledetailComponent }   from './articledetail/articledetail.component';

 const articleDetailRoutes: Routes = [

   {

     path: 'articledetail/:id',

     component: ArticledetailComponent,

     children: [

       {

         path: 'comment',

         component: CommentComponent

       }

     ]

   }

 ];

 @NgModule({

   imports: [

     RouterModule.forChild(articleDetailRoutes)

   ],

   exports: [

     RouterModule

   ]

 })

 export class ArticleDetailRoutingModule { }

 const routes:Routes=[

 { path: 'article',component: ArticleComponent},

 { path: '',redirectTo:"/article",pathMatch: 'full'}

 ];

 import { BrowserModule } from '@angular/platform-browser';

 import { NgModule } from '@angular/core';

 import { FormsModule } from '@angular/forms';

 import { HttpModule } from '@angular/http';

 import { AppRoutingModule } from './app.routing';

 import { ArticleDetailRoutingModule } from './articledetail.routing';

 import {BlogService} from './data/blog.service';

 import {CommentService} from './data/comment.service';

 import { AppComponent } from './app.component';

 import { ArticleComponent } from './article/article.component';

 import { ArticledetailComponent } from './articledetail/articledetail.component';

 import { CommentComponent } from './comment/comment.component';

 @NgModule({

   declarations: [

     AppComponent,

     ArticleComponent,

     ArticledetailComponent,

     CommentComponent

   ],

   imports: [

     BrowserModule,

     FormsModule,

     HttpModule,

     ArticleDetailRoutingModule,

     AppRoutingModule

   ],

   providers: [BlogService,CommentService],

   bootstrap: [AppComponent]

 })

 export class AppModule { }

 import { Component, OnInit,Input } from '@angular/core';

 import {ActivatedRoute,Params,Router} from '@angular/router';

 import { Location }     from '@angular/common';

 import {Comment} from '../data/comment';

 import {CommentService} from '../data/comment.service';

 import 'rxjs/add/operator/switchMap';

 @Component({

     selector: 'comment',

     templateUrl: './comment.component.html'

 })

 export class CommentComponent implements OnInit {

     BlogTitle:string;

     private comments:Comment[];

     private com:Comment=new Comment();

     private blogId:number;

     constructor(

         private cService: CommentService,

         private aRoute: ActivatedRoute,

         private router: Router,

         private location: Location

     ){}

     ngOnInit() {

             let id=this.aRoute.params

         .subscribe(params=>{

             this.comments=this.cService.GetBlogComments(+params["id"]);

             this.blogId=+params["id"];

             this.BlogTitle=params["title"];

         })

     }

     sumComment()

     {

         if(this.com.userName&&this.com.content)

         {

             this.com.blogId=this.blogId;

             this.cService.AddComment(this.com);

             this.comments=this.cService.GetBlogComments(this.blogId);

             console.log(this.comments);

             this.com=new Comment();

         }

     }

 }

 <div class="container">

     <h2>Blog: {{BlogTitle}}</h2>

 <div class="comment">

     <div class="section">

         <div *ngFor="let com of comments">

             <div>

                 <span>名字：</span>

                 <span>{{com.userName}}</span>

             </div>

             <div >

                 <span>评论内容：</span>

                 <span>{{com.content}}</span>

             </div>

             <div class="divider"></div>

         </div>

     </div>

 </div>

 <div class="divider red"></div>

 <div>

     <div class="section">

         <div class="">

         来，评论一下

         </div>

         <div>

             <input type="text" placeholder="你的名字" [(ngModel)]="com.userName" class="">

             <input type="text" placeholder="说点儿什么" [(ngModel)]="com.content" class="">

         </div>

         <div>

             <button class="btn" (click)="sumComment()">提交</button>

         </div>

     </div>

 </div>

 </div>