2017-07-07 5 views
1

Ich habe eine angular 2-Anwendung mit CLI erstellt, ich lerne gerade darüber, ich versuche eine Route einzurichten, aber aus irgendeinem Grund funktioniert es nicht, wenn der Link angeklickt wird, ist die URL richtig, aber der hTML-Inhalt wird angezeigt gleich, der Inhalt der Komponente ich will, ist angezeigt werden nicht angezeigt ...Angular 2 Route funktioniert nicht

Dies ist der app.module.ts Code:

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 { } 

Und das ist der Code meiner product-list.component.ts Datei:

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

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

Ich bin mir nicht sicher, was ich falsch mache, gibt es nicht Fehler in der Entwickler-Tools-Konsole sind, gibt es keine HTTP-Anfrage durchgeführt, wenn der Link angeklickt wird ...

Der Link Ich bin sprechen, ist in app.component.html:

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

die Haupt-uRL ist diese: http://localhost:4200, und wenn der Link angeklickt wird es ändert sich zu http://localhost:4200/products aber nur die uRL ändert sich nicht die html, der Inhalt des product-list.component.ts nicht angezeigt wird .. irgendeine Idee? Kann ich herausfinden, was hier vor sich geht?

Antwort

1

Es sieht so aus, als ob Ihnen die Direktive router-outlet in Ihrer .html fehlt.

+0

Dank Deborah, ich habe Ihre Video-Tutorial in Pluralsight "Angular: Getting Started" gesehen und ist super !!! :) – AlexGH

+0

Danke! Ich habe auch eine auf Routing, wenn Sie mehr Informationen dazu wünschen: https://app.pluralalsight.com/library/courses/angular-routing/table-of-contents – DeborahK

+0

Vielen Dank! Ich werde es mir genau ansehen! :) – AlexGH