Angular 路由快速入门

  1. 云栖社区>
  2. 博客>
  3. 正文

Angular 路由快速入门

一线分享 2017-12-21 10:06:36 浏览621
展开阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/78860381

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

  1. 在地址栏输入URL,浏览器就会导航到相应的页面。
  2. 在页面中点击链接,浏览器就会导航到一个新页面。
  3. 点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航。
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);
}


网友评论

登录后评论
0/500
评论
一线分享
+ 关注