Angular 角度2路线不工作

我已经使用CLI创建了angular 2应用程序，我正在了解它，我正在尝试设置路由，但由于某些原因，它不起作用，当单击链接时，url显示正确，但html内容相同，我要显示的组件的内容不显示

这是app.module.ts代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { ProductListComponent } from '../products/product-list.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
      HttpModule,
      RouterModule.forRoot([
          { path: 'products', component: ProductListComponent }
      ])
    ],
  declarations: [
      AppComponent, ProductListComponent
  ],
  //providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的

产品列表.component.ts

文件的代码：

import { Component, OnInit } from '@angular/core';
@Component({
    template: '<p>Component product list</p>'
})

export class ProductListComponent {
 title: 'The Products from Component...';
}

---

主url是这样的：

http://localhost:4200

，单击链接时，链接将变为

http://localhost:4200/products

但只有url更改而不是html，不会显示

产品列表.component.ts

的内容。。有什么想法吗？我有办法知道发生了什么吗？

看起来您可能缺少.html中的

路由器出口

指令

<h1>
  {{title}}
</h1>
<p>This is a test</p>
<router-outlet></router-outlet>
<a [routerLink] ="['/products']"> Values list</a>

{{title}}
这是一个测试

值列表

谢谢Deborah，我在Pluralsight“Angular:入门”中看过你的视频教程，非常棒！！！：）谢谢我也有一个路由，如果你想知道更多的信息：谢谢！我一定会看的！：）

<h1>
  {{title}}
</h1>
<p>This is a test</p>
<router-outlet></router-outlet>
<a [routerLink] ="['/products']"> Values list</a>