Routing lädt die Seite immer neu

Question

Wenn ich mit Routen von einer Komponente zur nächsten navigiere, lädt angle die Anwendung immer neu. Reihenfolge der Ereignisse:

• Last-Homepage (locahost: 4200)
• Umleitungen an Standorten (localhost: 4200/locations)
• Klicktaste Routen (localhost: 4200/Artikel/1)
• Anzeigen Artikelseite
• dann automatisch Routen zu (localhost: 4200/#) [? wie kann ich es zu tun, dies zu stoppen]
• und dann Routen zurück an Orten (localhost: 4200/locations)

Gedanken darüber, was falsch ist und warum es auf der Artikelseite nicht aufhört? Ich habe mir die Haare ausgezogen (was noch übrig ist), um etwas herauszufinden, von dem ich sicher bin, dass es ein einfacher Benutzerfehler ist.

Auch gibt es keine Fehler in der Chrome-Konsole oder im Webstorm-Terminal. Ich benutze eckige 4.2.4.

Hier sind meine Komponenten:

AppModule

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

import {AppComponent} from './app.component'; 
import {LocationComponent } from './location/location.component'; 
import {ItemsComponent } from './items/items.component'; 

import {AppRoutingModule} from './app-routing.module'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule 
    ], 
    declarations: [ 
    AppComponent, 
    LocationComponent, 
    ItemsComponent 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { ItemsComponent } from './items/items.component'; 
import {LocationComponent} from './location/location.component'; 

const routes: Routes = [ 
    { path: 'locations', component: LocationComponent }, 
    { path: 'items/:id', component: ItemsComponent }, 
    { path: '', redirectTo: '/locations', pathMatch: 'full' } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

AppComponent

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: `<div>Hello</div><router-outlet></router-outlet>` 
}) 
export class AppComponent { } 

LocationComponent

012 AppRouting

import {Component, OnInit} from '@angular/core'; 
import {LocationModel} from './location.model'; 
import {Router} from '@angular/router'; 

@Component({ 
    templateUrl: './location.component.html', 
    styleUrls: ['./location.component.css'] 
}) 
export class LocationComponent implements OnInit { 

    locations: LocationModel[]; 
    location: LocationModel; 

    constructor(private router: Router) { 
    this.locations = [ 
     {id: 1, name: 'Loc1'}, 
     {id: 2, name: 'Loc2'}, 
     {id: 3, name: 'Loc3'}, 
     {id: 4, name: 'Loc4'} 
    ]; 
    } 

    ngOnInit() { 
    } 

    onSelect(loc: LocationModel): void { 
    this.location = loc; 
    console.log('onSelect for loc.id[' + this.location.id + ']'); 
    window.alert('onSelect for loc.id[' + this.location.id + ']'); 
    this.router.navigate(['/items', this.location.id]); 
    } 
} 

Location - HTML

<nav class="navbar navbar-fixed-top"> 
    <a class="navbar-brand" href="do_nothing">CO_ICON</a> 

    <div class="nav navbar-nav"> 
    <a class="nav-item nav-link active" href="do_nothing"> 
     <div>Add</div> 
    </a> 
    </div> 
</nav> 

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <!-- /.card --> 
     <div class="card" *ngFor="let location of locations" (click)="onSelect(location)"> 
     <div class="card-block"> 
      <div class="list-group"> 
      <a href="do_nothing" class="list-group-item">{{location.name}}</a> 
      </div> 
     </div> 
     </div> 
     <!-- /.card --> 
    </div> 
    </div> 

ItemComponent

import 'rxjs/add/operator/switchMap'; 
import { Component, OnInit } from '@angular/core'; 
import {ItemModel} from './item.model'; 
// import {ItemService} from './item.service'; 
import {ActivatedRoute, ParamMap} from '@angular/router'; 

@Component({ 
    templateUrl: './items.component.html', 
    styleUrls: ['./items.component.css'] 
}) 
export class ItemsComponent implements OnInit { 

    items: ItemModel[]; 

    constructor(
    // private itemService: ItemService, 
    private route: ActivatedRoute) { 
    console.log('constructed ItemsComponent'); 
    // window.alert('constructed ItemsComponent'); 
    this.items = [ 
     {id: 1, location: 1, name: 'Item 1', quantity: 1}, 
     {id: 2, location: 1, name: 'Item 2', quantity: 2}, 
     {id: 3, location: 2, name: 'Item 3', quantity: 1}, 
     {id: 4, location: 1, name: 'Item 4', quantity: 2} 
    ]; 
    } 

    ngOnInit() { 
    // this.route.paramMap 
    // .switchMap((params: ParamMap) => this.itemService.getItems(+params.get('id'))) 
    // .subscribe(list => this.items = list); 

    console.log('ngOnInit for is with 1 - A'); 
    window.alert('ngOnInit for is with 1 - A'); 
    } 

} 

Item - HTML

<nav class="navbar navbar-fixed-top"> 
    <a class="navbar-brand" href="do_nothing">CO_ICON</a> 

    <div class="nav navbar-nav"> 
    <a class="nav-item nav-link active" href="do_nothing"> 
     Add Item 
    </a> 
    </div> 
</nav> 

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <!-- /.card --> 
     <div class="card" *ngFor="let item of items"> 
     <div class="card-block"> 
      <div class="list-group"> 
      <a href="do_nothing" class="list-group-item">{{item.name}}</a> 
      </div> 
     </div> 
     </div> 
     <!-- /.card --> 
    </div> 
    </div> 

Jede Hilfe ist sehr zu schätzen! Vielen Dank!

Chris ....

Answer 1

Entfernen Sie die href = "#" aus dem Anker-Tags. Das native HTML-href-Attribut bewirkt, dass angular neu geladen wird. Die Winkelnavigation sollte von den Router-Richtlinien und -Diensten gehandhabt werden.