当我使用组件之间的路由导航时,Angular总是重新加载应用程序。事件顺序如下:
以下是我的组件:
AppComponent
位置组件
位置 - HTML
商品组件
项目 - HTML
任何帮助都非常感激!谢谢!Chris....
- 加载主页(localhost:4200)
- 重定向到位置(localhost:4200/locations)
- 单击按钮路由到(localhost:4200/items/1)
- 显示项目页面
- 然后它自动路由到(localhost:4200/#)[我该如何阻止它这样做?]
- 然后它又路由回位置(localhost:4200/locations)
以下是我的组件:
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 { }
位置组件
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]);
}
}
位置 - 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>
商品组件
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');
}
}
项目 - 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>
任何帮助都非常感激!谢谢!Chris....