Question

我已经使用CLI创建了一个角度2应用程序，我刚刚了解它，我尝试设置一条路线，但由于某种原因，当点击该链接时它无法正常工作网址正确显示，但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...';
}

我不确定我做错了什么，开发人员工具控制台中没有错误，点击链接时没有任何http请求...

我正在谈论的链接位于app.component.html：

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

主要网址为：http://localhost:4200，点击链接时会更改为http://localhost:4200/products，但只是网址更改不是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路线不起作用

1 个答案: