Angular2+如何去除url中的#号详解

要去除Angular2+中URL中的#号，需要使用HTML5的history API来实现。具体步骤如下：

1. 在app.module.ts中添加以下代码来启用HTML5历史记录：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; // 引入两个类：LocationStrategy和HashLocationStrategy

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ { provide: LocationStrategy, useClass: HashLocationStrategy } ], // 使用HashLocationStrategy
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

1. 配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

1. 在app.component.html中添加以下代码

<router-outlet></router-outlet>

示例一： 使用HashLocationStrategy

在app.module.ts中，我们使用 HashLocationStrategy 让Angular使用需要添加#符号的URL。这是因为，如果您不使用#符号，浏览器会认为您正在请求服务器来获取一个新的资源，否则会导致404错误。

示例二：使用PathLocationStrategy

如果您希望去掉URL中的 # 符号，可以使用 PathLocationStrategy。PathLocationStrategy使用HTML5的history API中的pushState和replaceState方法去掉URL中的#符号。

在app.module.ts中，将代码更改如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }], // 使用PathLocationStrategy
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

在这种情况下，URL将不再包含＃符号。当您将PathLocationStrategy与服务端渲染（SSR）一起使用时，您必须确保服务器将所有请求路由到Angular应用程序的index.html文件，因为这个文件是唯一具有完整的Angular环境的文件。

以上是Angular2+如何去除URL中的#号的攻略，通过使用一个提供商(LocationStrategy)替换另一个，可以轻松实现此功能。