Angular路由笔记

配置路由

app-routing.module.ts

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

  import { NewsComponent } from './news/news.component';
  
  const routes: Routes = [
    {
      path: 'news',
      component: NewsComponent，
      children: [
         { path: 'news', component: NewsComponent },  // 嵌套路由
      ]
    },
    { path: '',   redirectTo: '/news', pathMatch: 'full' }, // 路由重定向
    { path: '**', component: NewsComponent }, // 通配符路由
  ];

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

路由传参

app.component.html

  <a [routerLink]="['/news']" routerLinkActive="active">普通跳转</a>  <!-- routerLinkActive指定路由激活后的样式 -->
  <a [routerLink]="['/news']" routerLinkActive="active">动态路由传参</a>
  <a [routerLink]="['/news']" routerLinkActive="active">get传参</a>
  <div (click)="goLink()">js跳转</div>
  <router-outlet></router-outlet>

app.component.ts

  import { Component, ViewChild } from '@angular/core';
  import { Router, NavigationExtras} from '@angular/router'
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {

    constructor(private router: Router) {
      // js 路由跳转 要引入 Router
    }

    goLink() {
      // this.router.navigate(['/news'])  // js 普通跳转
      // this.router.navigate(['/news',{name: 'liu', age: 77}])  // js 动态路由传参跳转
      let params: NavigationExtras = {  // js get 传参 还需引入 NavigationExtras
        queryParams: {name: 'liu', age: 77}
      }
      this.router.navigate(['/news'],params)  // js get 传参跳转
    }
  }

接收路由传参

news.component.ts

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  @Component({
    selector: 'app-news',
    templateUrl: './news.component.html',
    styleUrls: ['./news.component.scss']
  })
  export class NewsComponent implements OnInit {

    constructor(private route: ActivatedRoute) { }

    ngOnInit(): void {
      this.route.params.subscribe(data => {
        console.log(data) // {name: "wang", age: "22"}  接收动态路由传参
      })
      this.route.queryParams.subscribe(data => {
        console.log(data)  // {name: "wang", age: "22"}  接收get传参
      })
    }

  }

路由守卫

• CanActivate 处理导航到某路由的情况
• CanActivateChild 处理导航到某子路由的情况。
• CanDeactivate 处理从当前路由离开的情况
• Resolve 在路由激活之前获取路由数据。
• Canload 处理异步导航到某特性模块的情况。

使用 ng 指令创建路由守卫服务

ng generate guard your-guard

使用路由守卫

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AuthGuard } from './guards/auth.guard';
  
  import { NewsComponent } from './news/news.component';
  
  const routes: Routes = [
    {
      path: 'news',
      component: NewsComponent,
      canActivate: [AuthGuard]
      children: [
        {
          path: '',
          canActivateChild: [AuthGuard],
          children: [
            { path: 'crises', component: ManageCrisesComponent, canDeactivate: [CanDeactivateGuard] },
            {
              path: 'heroes',
              component: ManageHeroesComponent,
              resolve: {
                heroes: HeroesDetailResolverService
              } 
            },
            { path: '', component: AdminDashboardComponent, canLoad: [AuthGuard]}
          ]
        }
      ]
    },
    { path: '',   redirectTo: '/news', pathMatch: 'full' }, // 路由重定向
    { path: '**', component: NewsComponent }, // 通配符路由
  ];

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