Angular2 Routing - URL ändert sich nicht und Seite lädt nicht

Question

Ich habe begonnen, eckig2 mit Typoskript zu lernen und ich versuche, eine Route von Buch /: ID zu implementieren, aber meine Route ändert sich nicht und der HTML-Code doesn Weder noch.

Ich habe diese Datei app.module.ts genannt, die meine anderen Routen aller die Arbeit hat:

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { BookComponent } from'./components/book/book.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     BookComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'book/:id', component: BookComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'fetch-data', component: FetchDataComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModule { 
} 

Mein Buch Komponente, die ngOnInit

app.module.ts verwendet id zu erhalten von url

book.component.ts

import { Component } from '@angular/core'; 
import { LibraryService } from '../../services/app.service.library'; 
import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'book', 
    template: require('./book.component.html'), 
    providers: [LibraryService] 
}) 
export class BookComponent { 
    book: any; 

    constructor(private libraryService: LibraryService, private route: ActivatedRoute) {} 

    ngOnInit() { 
     // prints to console id e.g. 1 
     console.log(this.route.snapshot.params["id"]); 
     this.libraryService.getBook(this.route.snapshot.params["id"]) 
      .subscribe(response => this.book = response); 
    } 
} 

Wenn ich die URL im Browser eingeben „http://localhost:60369/book/1“ Ich habe diese Stack-Trace Fehlermeldung erhalten:

An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: TypeError: Cannot read property 'id' of undefined at AppView._View_BookComponent0.detectChangesInternal (BookComponent.ngfactory.js:27:82) at AppView.detectChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9566:18) at AppView.detectViewChildrenChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9592:23) at AppView._View_BookComponent_Host0.detectChangesInternal (BookComponent_Host.ngfactory.js:32:8) at AppView.detectChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9566:18) at AppView.detectContentChildrenChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9584:23) at AppView.detectChangesInternal (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9576:18) at AppView.detectChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9566:18) at AppView.detectViewChildrenChanges (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9592:23) at AppView.detectChangesInternal (C:\Users\GOWDY_N\Documents\Visual Studio 2015\Projects\MyAngular2App\MyAngular2App\node_modules\@angular\core\bundles\core.umd.js:9577:18)

Auch wenn ich versuche, auf die Buchseite aus dem Home-Bildschirm zu navigieren, mein console.log arbeitet in ngOnInit Die URL ändert sich jedoch nicht und der neue Inhalt wird nicht geladen.

home.component.ts

import { Component } from '@angular/core'; 
import { LibraryService } from '../../services/app.service.library'; 

@Component({ 
    selector: 'home', 
    template: require('./home.component.html'), 
    providers: [LibraryService] 
}) 
export class HomeComponent { 
    books: Array<any>; 

    constructor(private libraryService: LibraryService) { } 

    ngOnInit() { 
     this.libraryService.getBooks().subscribe(response => { 
      this.books = response; 
     }); 
    } 
} 

home.component.html

<div class="row"> 
<div class="jumbotron"> 
    <h1>Book Store</h1> 

    <div id="custom-search-input"> 
     <div class="input-group col-md-12"> 
      <input type="text" class="form-control input-lg" placeholder="Book title, author, etc" /> 
      <span class="input-group-btn"> 
       <button class="btn btn-info btn-lg" type="button"> 
        <i class="glyphicon glyphicon-search"></i> 
       </button> 
      </span> 
     </div> 
    </div> 

</div> 
<div class="col-md-12"> 
    <ul> 
     <li *ngFor="let book of books" style="list-style-type: none; padding: 10px;" class="col-md-4 hvr-curl-top-left"> 
      <div class="card" style="border-color: black; border-style: solid; border-width: thin; padding: 5px;"> 
       <div class="card-block"> 
        <h3 class="card-title">{{book.title}}</h3> 
        <p class="card-text">{{book.description}}</p> 
        <a href="#" [routerLinkActive]="['link-active']" class="btn btn-primary" [routerLink]="['/book', book.id]">More details</a> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

Ein Klick auf diesen Link:

<a href="#" [routerLinkActive]="['link-active']" class="btn btn-primary" [routerLink]="['/book', book.id]">More details</a> 

Gibt mir keinen Stack-Trace-Fehler, aber der neue Inhalt wird nicht geladen und die URL bleibt gleich. Ich bekomme auch eine console.log Nachricht innerhalb von book.component.ts und Bibliotheksdienst funktioniert auch.

Ich kann nicht sehen, was ich vermisse.

Answer 1

Sie versuchen, direkt auf die Parameter des Routers zuzugreifen, dies könnte das undefinierte beim Laden der Seite verursachen.

Versuchen Sie es auf eine lokale Variable Speichern wie:

let params: Params = this.route.snapshot.params; 

Danach den Code auf params ausführen []

Answer 2

ich einige Fortschritte bei meinem ersten Problem gemacht. Weil ich early2 und alles, was ich damit machen kann, lerne, schrieb ich ursprünglich den Code, um subscribe zu verwenden, wenn der Benutzer von der Homepage auf die Buchseite mit URL-Buch/1 zum Beispiel geht.

Allerdings habe ich jetzt die Art geändert, wie ich subscribe benutze, weil ich einen Template-Fehler bekommen habe.

ich dies wurde mit vor auf ngOnInit:

ngOnInit() { 
    this.libraryService.getBooks().subscribe(response => { 
     this.books = response; 
    }); 
} 

Aber jetzt habe ich es so weit geändert:

ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      const id = params["id"]; 
      this.book = this.libraryService.getBook(id); 
     }); 
    } 

Mit abonnieren fühlt sich jetzt ein wenig überflüssig, weil weil es nur eine einfache API Ruf, ich muss nichts in meinem Winkelcode beobachten.

Ich werde diese Antwort hier für jetzt lassen, aber wenn jemand eine bessere Antwort mit einer Erklärung hat, werde ich ihre Antwort als richtig markieren.