在 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 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
是一个路由事件触发或导航顺利结束时调用。要了解有关路由事件的更多信息,请单击此处。
当我们点击服务部分时,我们会得到当前的服务路由,关于我们部分也是如此。
此外,你还可以根据需要修改这些部分。
点击这里查看上述代码的演示。
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