在 Angular 中获取当前路由

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 互联网上路由的定义和使用
  2. 在 Angular 中获取当前路由的步骤
  3. 在 Angular 中创建一个 HTML 模板以获取当前路由
在 Angular 中获取当前路由

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 项目。
  • 将路由添加到 app.module.ts 文件。
  • 将路由添加到 app-routing.module.ts 文件。
  • 处理 HTML 和 TypeScript 文件。

我们将使用上面提到的步骤编写一个在 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 usservices。因为我们希望我们的模块尽可能独立,所以它的所有子路由都定义在模块内的单独文件中。

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 是一个路由事件触发或导航顺利结束时调用。要了解有关路由事件的更多信息,请单击此处

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

Angular 的当前路由

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

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

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相关文章 - Angular Router