Angular2路由的简单实用

╰半夏微凉° 2022-07-15 11:41 170阅读 0赞

要想使用路由我们先要在app.module中导入router服务  
`import{RouterModule}from'@angular/router';`使用这段导入module

@NgModule({
      imports:[
       RouterModule.forRoot([
    //path对应的是点击链接显示的内容,component内容是调用的conponent类的名字
    //HeroComponentComponent是使用import导入的自己创建的component
        {path:'test',component:HeroComponentComponent}
    ])
      ],
      exports:[RouterModule]
    })

在html中使用的例子`<a routeLink="/test"></a>`就自动访问上面的这个RouterModuler

## ***提取路由*** ##

上面的最基础的使用路由，下面我们将路由提取出来，  
我们先创建一个自己的路由文件test.routing.module.ts文件，在文件中我们同样要导入NoModule 和RouterModule

import { NgModule} from '@angular/core'
    import {RouterModule} from '@angular/router'
    import {LoginComponent}from './login.component'
    @NgModule({
      imports:[
      //加入自己想要创建的路由
     RouterModule.forRoot([{path:'test',component:LoginComponent}])
      ],
      exports:[RouterModule]
    })
    export  class TestRoutingModule{ 
    
    
    }

这样这个路由的文件就创建完成了，但是现在还没有生效，我们想要让路由生效那么我们需要在app.module中注入我们创建的module  
首先导入component

import {TestRoutingMocdule} from './test.routing.module';

然后再app.module中的imports中注入我们创建的路由module

imports: [
        AppRoutingMocdule
      ]

现在提取路由的步骤就完成了

## ***下面那我们尝试使用路由来传递参数*** ##

有了上面的基础我们直接说声明路由的部分  
在声明路由的时候在path中使用path:’路径:id’的方式说明这个是带有参数的链接

RouterModule.forRoot([ {path:'test:id',component:HeroComponentComponent}
    ])

然后a标签中的路径使用的是`<a routeLink="/test/参数"></a>`  
那么还需要

//导入两个包
    import { ActivatedRoute, Params } from '@angular/router';

构造器中注入服务

constructor( private route: ActivatedRoute} //接受参数的方法，route和构造器中的route同名 key是带参数路由中声明的变量名比如这里是id this.route.params.forEach((params: Params) => { let id = params['key']; this.heroService.getHero(id) .then(hero => this.hero = hero); });

## ***使用事件跳转路由*** ##

使用路由的时候会用到不使用链接的方式跳转路由，那么就用到了使用事件跳转路由  
首先在component的构造器中注入Router,当然是要导入Router服务的

constructor(public route:Router){ } //使用事件跳转页面,第二个参数是传递的参数 this.router.navigate(['ModifyModel', {model: this.modelInfo}]);

//路由后退页面
    goBack(): void {
      this.location.back();
    }

//redirectTo重定向
    { path: ‘’, pathMatch: ‘full’, redirectTo: ‘/inbox’ }

到这里路由的简单使用就够了