angular – 路由总是重新加载页面

当我使用从1个组件到下一个组件的路径进行导航时,angular总是重新加载应用程序.活动顺序：

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

关于什么是错的想法以及为什么它不停在项目页面上？我一直在拉我的头发(剩下的东西)试图找出一些我确定是一个简单的用户错误的东西.

此外,Chrome控制台或webstorm终端中没有错误.我正在使用角度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 {}

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]);
  }
}

位置 – 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},name: 'Item 2',quantity: 2},location: 2,name: 'Item 3',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>

任何帮助深表感谢！谢谢！

克里斯….

解决方法

从锚标记中删除href =“#”.原生html href属性导致angular重新加载.角度导航应由路由器指令和服务处理.