Angular 2 获取当前路线

typescript

Angular是一个流行的前端框架，用于构建现代化的Web应用程序。Angular 2是Angular的第二个版本，它引入了许多新功能和改进。其中之一是能够获取当前路线的功能。在本文中，我们将探讨如何使用Angular 2获取当前路线，并提供一些示例代码。

什么是当前路线？

在Angular中，路线是指应用程序中的不同页面或视图。例如，一个电子商务网站可能有一个主页、一个产品列表页和一个产品详情页。每个页面都有一个唯一的URL路径。获取当前路线意味着我们可以知道用户当前所在的页面。

如何获取当前路线？

在Angular 2中，我们可以使用Router模块来获取当前路线。首先，我们需要导入Router模块：

typescript
import { Router } from '@angular/router';

然后，在组件的构造函数中注入Router：

typescript
constructor(private router: Router) { }

接下来，我们可以使用Router的url属性来获取当前路线的URL路径：

typescript
getcurrentRoute() {
  const currentRoute = this.router.url;
  console.log(currentRoute);
}

在上面的代码中，我们创建了一个getcurrentRoute方法来获取当前路线，并使用console.log打印出来。

案例代码

以下是一个完整的示例代码，演示如何获取当前路线：

typescript
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  template: <code>
    <button (click)="getcurrentRoute()">获取当前路线</button>
  </code>,
  styles: []
})
export class AppComponent {
  constructor(private router: Router) { }
  getcurrentRoute() {
    const currentRoute = this.router.url;
    console.log(currentRoute);
  }
}

在上面的代码中，我们在AppComponent组件的模板中添加了一个按钮，当点击按钮时，会调用getcurrentRoute方法来获取当前路线。

在本文中，我们学习了如何使用Angular 2获取当前路线。通过使用Router模块的url属性，我们可以轻松地获取当前路线的URL路径。这对于构建具有多个页面或视图的应用程序非常有用。希望本文对你有所帮助！