在 Angular 中获取当前路由

1. 互联网上路由的定义和使用
2. 在 Angular 中获取当前路由的步骤
3. 在 Angular 中创建一个 HTML 模板以获取当前路由

Angular 路由是一个强大的工具，可以实现应用程序的导航。它是构建单页应用程序的重要组件。

这篇文章是关于 Angular 路由的。这将有助于你学习如何在 Angular 中获取当前路由。

Angular 为前端应用程序提供了一个路由，它为用户提供当前路由并允许导航到其他路由。此外，Angular 路由提供双向数据绑定，这意味着任何数据更改都会反映在视图和 URL 中。

互联网上路由的定义和使用

没有路由，我们就无法运行互联网。路由用于访问 Internet 上的内容。这是一项服务，可让你在一个地方访问所有文章、视频和其他内容。

我们使用路由通知站点的服务器我们希望看到的页面。例如，我们通知 www.wikipedia.com，我们对 /Angular (web framework) 感兴趣。

https://en.wikipedia.org/wiki/Angular_(web_framework)

上面的链接将我们带到了 AngularJS 框架。服务器可以借助路由精确地决定我们希望访问哪个页面。

此外，它们通常是人类可辨认的。去哪里不仅对服务器很明显，对用户也很明显。

将链接上的 /Angular 替换为你想要的任何子 wiki 的名称，你就完成了。你无需使用搜索或单击任何按钮即可到达那里。

浏览器可以很好地处理路由，因为它长期以来一直是默认格式。它们可以轻松监控用户的导航并提供后退按钮或历史记录等功能。

点击这里了解更多关于路由的信息。

在 Angular 中获取当前路由的步骤

Angular 提供了一个强大而全面的路由库。让我们了解 Angular 路由的基础知识并讨论如何获取当前路由。

我们将使用上面提到的步骤编写一个在 Angular 中获取当前路由的完整示例。

路由服务提供了一组用于定义路由和路由参数的 API。Angular 路由可以配置为对不同的 URL 使用多个视图，这样你就可以拥有一个包含两个部分的页面，每个部分都有自己的视图。

RouterModule 包含所有与路由相关的信息。Angular 包含在这个模块中。我们必须将该模块导入我们的 AppModule 才能使用路由。

那么，我们如何将路由付诸实践呢？如前所述，我们首先导入 RouterModule.

import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';

我们的应用程序现在已准备好进行路由。我们必须指出我们希望对我们的应用程序可用的路由。

同时，我们将决定在特定路由上展示哪些组件。但让我们从基础开始。

构建一个单独的路由文件来定义路由是一种很好的做法； Module+.routing.ts 是该路由文件最常用的名称。要为 AppModule 创建路由文件，我们将调用 app-routing.module.ts。

因此，让我们将该文件与 app.module.ts 文件相邻。我们在该文件中构建一个包含所有模块路由的静态数组。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppComponent } from './app.component';

import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  {path: '', redirectTo: 'AppComponent', pathMatch: 'full'},

  {path:'aboutus', component:AboutusComponent},

  {path:'services', component:ServicesComponent},
];

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

在这里，我们定义的 Routes 数组是最关键的元素。我们可以在该数组中定义我们的路由。

如你所见，这些路由被定义为对象。它们中的每一个都有一个路径属性。

例如，我们的 aboutusComponent 的路径将是 /aboutus。在这里，也可以构造带有可变参数的路由。

例如，你可能在 blog 路由下有一个 blog 组件。但是，我们希望这个组件根据路由显示不同的博客。

我们通过将博客的 id 附加到路由来做到这一点。

在 Angular 中创建一个 HTML 模板以获取当前路由

完成上述步骤后，现在是时候处理 HTML 文件以获取当前路由了。为此，我们使用路由链接。

使用 routerLink 属性，我们可以直接从 HTML 文档链接我们的应用程序的路由。将指令放在 HTML 元素中。

当访问者单击组件时，Angular 将显示当前路由。

<h3>Example of How to get Current Route in Angular</h3>

<ul>
   <li routerLinkActive="active">
      <a [routerLink]="['/aboutus']">About Us</a>
   </li>
   <li routerLinkActive="active">
      <a [routerLink]="['/services']">Services</a>
   </li>

</ul>

The current Route is {{currentRoute}}

<router-outlet></router-outlet>

此外，这里我们使用了路由插座。路由的出口，router-outlet，是 RouterModule 生成的属性，用作路由的占位符，指示匹配的组件应插入的位置。

应用程序 shell 是指包含路由出口的组件。

<router-outlet></router-outlet>

在同一个应用程序中，Angular 路由允许多个出口。主要出口是主要（或顶级）出口。

最后，outlet 属性使你能够为路由规范定义目标出口。

让我们来完成在 Angular 中获取当前路由的最后一步。为此，让我们创建一个 app.component.ts 文件。

请记住，我们在应用程序中创建了两条路由，about us 和 services。因为我们希望我们的模块尽可能独立，所以它的所有子路由都定义在模块内的单独文件中。

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

这里，NavigationEnd 是一个路由事件触发或导航顺利结束时调用。要了解有关路由事件的更多信息，请单击此处。

当我们点击服务部分时，我们会得到当前的服务路由，关于我们部分也是如此。

此外，你还可以根据需要修改这些部分。

点击这里查看上述代码的演示。