angular6-Routing

最新推荐文章于 2024-03-05 19:59:10 发布

盼盼盼

最新推荐文章于 2024-03-05 19:59:10 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 前端

本文链接：https://blog.youkuaiyun.com/come0across/article/details/88825132

前端同时被 2 个专栏收录

54 篇文章

订阅专栏

angular

26 篇文章

订阅专栏

本文详细介绍了如何在Angular 6中设置路由，包括使用Angular CLI生成AppRoutingModule，导入RouterModule和Router，配置路由，添加RouterOutlet，实现路由传参，获取路由参数以及返回父页面的方法。通过这些步骤，读者可以全面了解Angular 6的路由操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.使用angular CLI生成AppRoutingModule

ng generate module app-routing --flat --module=app

–flat将文件放在src / app而不是新建的文件夹中。
–module = app告诉CLI将其注册到AppModule的imports数组中。
生成的文件如下图所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

通常不在路由模块中声明组件，因此可以删除@ NgModule.declarations数组，并删除CommonModule引用。

2.导入RouterModule和Router

我们将在RouterModule中配置路由器的路由，因此从@ angular /路由器库中导入RouterModule和Router。
在@ NgModule中添加一个带有RouterModule的@ NgModule.exports数组。导出RouterModule使路由器指令用于需要它们的AppModule组件。

代码如下：

import { NgModule } from '@angular/core';

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

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

Angular Route有两个属性：

path：与浏览器地址栏中的URL匹配的字符串。
component：导航到此路由时路由器应创建的组件。
例如：当URL类似于localhost：4200 / hero时，页面就会导航到HeroComponent。

3.在@ NgModule.imports中配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroComponent }   from './hero/hero.component';

const routes: Routes = [
  { path: 'hero', component: HeroComponent }
];

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

4.添加RouterOutlet

在app.component.html中添加

<router-outlet></router-outlet>

<router-outlet>是告诉路由器在哪里显示路由视图

5.添加导航链接routerLink

app.component.html

<nav>
  <a routerLink="/hero">Hero</a>
</nav>

<router-outlet></router-outlet>

6.routerLinkActive设置默认选中路由

<nav>
  <span routerLink="/hero" routerLinkActive="active">Hero</span>
  <span routerLink="/header" routerLinkActive="active">Header</span>
</nav>

.active{
    color:red;
}

7.添加默认路由

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/hero', pathMatch: 'full' },
  { path: 'hero', component: HeroComponent }
];

8.路由传参

app-routing.module.ts中

import { DetailComponent} from './detail/detail.component'
const routes: Routes = [
	 ...
  { path: 'test/:id', component: DetailComponent },
];

1.routerLink跳转传参

<span routerLink="/test/{{id}}" routerLinkActive="active">跳转传参</span>
<span [routerLink]="[ '/test/',id]" routerLinkActive="active">跳转传参</span>

2.JS跳转传参

<span (click)="goDetail(id)">test</span>

import { Router, ActivatedRoute } from '@angular/router'
 constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}
  goDetail(id): void {
    this.router.navigate(['/test', id]);
  }

9.获取路由参数

import { ActivatedRoute } from '@angular/router';

constructor(private ActivatedRoute:ActivatedRoute) { }

ngOnInit() {
   console.log(this.ActivatedRoute.snapshot.paramMap)
 }

10.返回当前页面的父页面

<button (click)="goBack()">返回</button>

import { Location } from '@angular/common';
constructor(
  private location: Location
) {}
goBack(): void {
  this.location.back();
}