使用Angular的定位服务

Location 是 Angular 2+ 应用程序中提供的一项服务，可以轻松与当前 URL 路径进行交互。 对于大多数导航需求，Angular 路由器 是正确的解决方案，但在少数情况下，需要位置服务来影响 url，而不涉及路由器。 此外，当与路由器结合执行某些操作时，定位服务可以派上用场。

使用定位服务

为了访问定位服务，使用 LocationStrategy 和 PathLocationStrategy 从 @angular/common 导入它，将成员添加到您的提供者列表并注入Location 在构造函数中：

// ...
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Component({
  ...
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class AppComponent {
  constructor(private location: Location) { }

  // ...
}

前进和后退

假设我们希望方法在导航中前进或后退：

goBack() {
  this.location.back();
}

goForward() {
  this.location.forward();
}

获取当前路径

您可以使用 Location.path 方法获取当前路径：

getPath() {
  console.log(this.location.path());  
}

定位服务+路由器

Angular 路由器有一个 events 方法，它返回一个我们可以订阅的 observable，以便监听导航的变化。 假设我们想监听 url 的变化，如果用户在根路径，则将 isRoot 成员变量设置为 true：

isRoot: boolean;

ngOnInit() {
  this.router.events.subscribe(event => {
    if (this.location.path() !== '') {
      this.isRoot = false;
    } else {
      this.isRoot = true;
    }
  });
}

对于上面的例子，不要忘记从 @angular/router 导入和注入路由器。

---

位置服务有一些更有用的方法。 请注意，对于所有这些方法，给定的 URL 首先根据应用程序的基本 href 值进行规范化：

• go：更改给定的 URL 并将其添加到浏览器的历史记录中。
• replaceState：更改给定的 URL，并替换历史中最顶层的 URL。 这样一来，如果用户返回，它就不会返回用户所在的 URL，而是返回之前的 URL。
• isCurrentPathEqualTo：比较两个给定的路径值，看它们是否相等。
• normalize：取路径，返回归一化路径。