Angular 2 条路线不工作

Question

我已经使用 CLI 创建了一个 angular 2 应用程序，我只是在学习它，我正在尝试设置一个路由但由于某种原因它不起作用，当 link单击 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 { }

这是我的 product-list.component.ts 文件的代码：

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

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

我不确定自己做错了什么，开发人员工具控制台中没有错误，单击 link 时没有发出任何 http 请求...

我说的link在app.component.html:

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

主要的 url 是这个：http://localhost:4200，单击 link 时它会变为 http://localhost:4200/products 但只有 url 不会变html，product-list.component.ts 的内容未显示。知道吗？我有什么办法可以查明发生了什么吗？

Answer 1

您的 .html.

中似乎缺少 router-outlet 指令

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

Angular 2 条路线不工作

Angular 2 route not working

angular2-template

angular2-routing

angular