LocationStrategy策略

在 Angular 4 中，LocationStrategy 是用来处理应用程序路由的策略接口。它定义了如何将 URL 映射到应用程序状态以及如何将应用程序状态映射回 URL。LocationStrategy 有四种实现：HashLocationStrategy、PathLocationStrategy、PathLocationStrategyWithBase 和 PathLocationStrategyWithoutBase。在这个章节中，我们将详细介绍这些策略的使用方法。

HashLocationStrategy

HashLocationStrategy 是 Angular 默认的 LocationStrategy 策略。它使用 URL 中的 hash（#）来管理路由。当用户导航到某个路由时，URL 中会添加一个 hash 参数，例如：http://example.com/#/home。这样做的好处是可以在不刷新页面的情况下改变路由，但缺点是 URL 看起来不够干净。

要在应用程序中使用 HashLocationStrategy，需要在 AppModule 中导入 RouterModule，并在 RouterModule.forRoot() 方法中指定 HashLocationStrategy 作为 LocationStrategy 的实现。示例代码如下：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  ],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  exports: [RouterModule]
})
export class AppModule { }

PathLocationStrategy

PathLocationStrategy 是另一种常用的 LocationStrategy 策略。它使用 URL 的路径来管理路由，例如：http://example.com/home。相比于 HashLocationStrategy，PathLocationStrategy 的 URL 更加干净，但在一些服务器配置下可能会导致404错误。

要在应用程序中使用 PathLocationStrategy，需要在 AppModule 中导入 RouterModule，并在 RouterModule.forRoot() 方法中指定 PathLocationStrategy 作为 LocationStrategy 的实现。示例代码如下：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { PathLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }],
  exports: [RouterModule]
})
export class AppModule { }

PathLocationStrategyWithBase 和 PathLocationStrategyWithoutBase

PathLocationStrategyWithBase 和 PathLocationStrategyWithoutBase 是对 PathLocationStrategy 的扩展，用来处理基础路径。PathLocationStrategyWithBase 在 URL 前添加一个基础路径，例如：http://example.com/basepath/home，而 PathLocationStrategyWithoutBase 则不添加基础路径。

要在应用程序中使用 PathLocationStrategyWithBase 或 PathLocationStrategyWithoutBase，需要在 AppModule 中导入 RouterModule，并在 RouterModule.forRoot() 方法中指定 PathLocationStrategyWithBase 或 PathLocationStrategyWithoutBase 作为 LocationStrategy 的实现。示例代码如下：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { PathLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { basePath: 'basepath' })
  ],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategyWithBase }],
  exports: [RouterModule]
})
export class AppModule { }

以上就是 LocationStrategy 策略的介绍和使用方法，根据实际需求选择合适的策略来管理应用程序的路由。