路由总是重新加载页面

Question

当我使用从 1 个组件到下一个组件的路由导航时，angular 总是重新加载应用程序。事件顺序：

加载主页 (localhost:4200)
重定向到位置 (localhost:4200/locations)
单击按钮路由到 (localhost:4200/items/1)
显示项目页面
然后它会自动路由到 (localhost:4200/#) [我怎样才能阻止它这样做？]
然后它路由回位置 (localhost:4200/locations)

想知道哪里出了问题以及为什么它不会在项目页面上停止吗？我一直在竭尽全力（只剩下一点点）试图找出一些我确信是简单的用户错误的东西。

此外，chrome 控制台或 webstorm 终端中没有错误。我正在使用 angular 4.2.4.

这是我的组件：

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

应用组件

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>

非常感谢任何帮助！谢谢！

克里斯....

Answer 1

从锚标记中删除 href="#"。本机 html href 属性导致 angular 重新加载。 Angular 导航应由路由器指令和服务处理。

Answer 2

添加javascript:;改为 link href...这不会使页面立即滚动到顶部，或者如果您也使用哈希，则不会炸毁您的路由器。

Answer 3

正如 LLai 在中所说，为了防止重新加载，您应该 而不是 使用 <a> 标签中的 href 属性，而是使用 AngularRouter 和他的 routerLink 指令。

因此，从 <a> 标签和中删除 href 属性像这样使用 routerLink：

<a class="list-group-item" [routerLink]="['login']"></a>

干杯。 :)

路由总是重新加载页面

Routing always reloads the page

angular2-routing

angular