Angular 4路由带有无限/＃/ url

Question

有些日子我有Angular CLI和Routing这个问题。 如果你指向确切的网址，它似乎工作正常。 当您尝试使用routerLink重定向时，它会在URL中写入无限/＃页面。 如果您在索引上并尝试转到关于页面，则会写入http：// baseurl / index＃/ about＃/ index＃/ index＃/ index＃/ index＃/ index＃/ index＃/ index＃/ ...继续直到完成RAM：D

此问题仅在具有“ng serve”的devmode中（但与hashlocationstrategy一起使用）。 在生产模式似乎工作正常。

这里有一些代码。

在index.html中

<base href="/">

app.module

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

import { AppComponent } from './app.component';

import { ConnectionService, ownerEnums, requestIdEnums } from './services/connection.service';
import { AuthService } from './services/auth.service';

import { AboutComponent } from './about/about.component';
import { ConnectComponent } from './connect/connect.component';
import { LayoutComponent } from './layout/layout.component';

import { HeaderComponent } from './layout/header/header.component';
import { BreadcrumbComponent } from './layout/breadcrumb/breadcrumb.component';
import { FooterComponent } from './layout/footer/footer.component';
import { IndexComponent } from './layout/index/index.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
    { path: '', redirectTo: '/index', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'connect', component: ConnectComponent },
    { path: 'index', component: LayoutComponent }
    ]),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    AboutComponent,
    ConnectComponent,
    LayoutComponent,
    HeaderComponent,
    BreadcrumbComponent,
    FooterComponent,
    IndexComponent
  ],
  providers: [ ConnectionService, AuthService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

在页面中使用routerLink的锚点

    <div>
        <a class="navbar-brand" [routerLink]="['/about']"><i class="fa fa-info"></i></a>
        <a class="navbar-brand" [routerLink]="['/connect']"><i class="fa fa-plug"></i></a>
    </div>

Answer 1

在路由模块的@NgMoudle中添加{useHash：true}选项。 这将阻止问题，但我不完全理解为什么。 该选项旨在与旧版浏览器兼容，但我使用的是最新版Chrome。 我已经在没有这个问题的同一台PC上使用相同的浏览器编写了其他角度项目，并且我的问题代码看起来相同。 我写这不是一个解决方案，但鉴于没有人回答这个问题，我希望我的回答可以作为一个“线索”给一个比我更好的人解释它发生了什么以及为什么

@NgModule({
imports:[RouterModule.forRoot(appRoutes, {useHash: true})], 
exports:[RouterModule]
})

Answer 2

将路由器模块更改为

{ path: 'about', component: AboutComponent },
{ path: 'connect', component: ConnectComponent },
{ path: 'index', component: LayoutComponent },
{ path: '', redirectTo: 'index', pathMatch: 'full'},
{path:'**',redirectTo:'index',pathMatch:'full'}