When I navigate using routes from 1 component to the next, angular always reloads the application. Order of events:
Thoughts on what is wrong and why it does't stop on the items page? I've been pulling my hair out (what little is left) trying to figure out something that I'm sure is a simple user error.
Also, there are not errors in the chrome console or in the webstorm terminal. I'm using angular 4.2.4.
Here are my components:
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 { }
AppRouting
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
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>
Any help is much appreciated! Thanks!
Chris....
Remove the href="#" from your anchor tags. The native html href attribute causes angular to reload. Angular navigation should be handled by the router directives and service.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments