Angular 路由快速入门

发布时间：2020-12-17 08:31:29 所属栏目：安全来源：网络整理

导读：浏览器具有我们熟悉的导航模式：在地址栏输入URL，浏览器就会导航到相应的页面。在页面中点击链接，浏览器就会导航到一个新页面。点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。 Angular的Router（即“路由器”）借鉴了这个模

浏览器具有我们熟悉的导航模式：

在地址栏输入URL，浏览器就会导航到相应的页面。
在页面中点击链接，浏览器就会导航到一个新页面。
点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。

Angular的Router（即“路由器”）借鉴了这个模型。它把浏览器中的URL看做一个操作指南，据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。我们可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。

添加Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,RouterModule
  ],bootstrap: [
    AppComponent
  ],declarations: [
    AppComponent
  ]
})
export class AppModule {}

配置主路由

RouterModule.forRoot() 方法用于在主模块中定义主路由信息，通过调用该方法使得主模块可以访问路由模块中定义的指令。主路由只能定义一次。

// ...
import { Routes,RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [
    BrowserModule,RouterModule.forRoot(ROUTES)
  ],// ...
})
export class AppModule {}

配置子路由

在AppModule中配置了主路由，那么在其它模块中，我们就必须调用RouterModule.forChild()方法来注册子路由。

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [
    RouterModule.forChild(ROUTES)
  ],// ...
})
export class ChildModule {}

配置仪表盘路由

要让app.module.ts能导航到仪表盘，就要先导入仪表盘组件，然后把下列路由定义添加到Routes数组中。

{
  path: 'dashboard',component: DashboardComponent
},

添加重定向路由

浏览器启动时地址栏中的地址是/。当应用启动时，它应该显示仪表盘，并且在浏览器的地址栏显示URL：/dashboard

{
  path: '',redirectTo: '/dashboard',pathMatch: 'full'
},

配置带参数的路由

路径中的冒号 (:) 表示:id是一个占位符，当导航到这个HeroDetailComponent组件时，根据id获取英雄信息。

{
  path: 'detail/:id',component: HeroDetailComponent
},

获取路由中参数

ngOnInit(): void {
  this.route.paramMap
    .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
    .subscribe(hero => this.hero = hero);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!