Angular의 라우팅과 빠르게 시작하는 방법에 대해 자세히 알아보세요.

이 글은 Angular 라우팅에 대한 심층적인 이해를 제공하고, 빠르게 시작하는 방법을 알아보고, 일치 규칙, 라우팅 매개변수, 라우팅 중첩, 라우팅 가드 등을 소개합니다. 모두에게 도움이 되기를 바랍니다!

Angular에서 라우팅은 모듈을 기반으로 하며 각 모듈은 자체 라우팅을 가질 수 있습니다. [관련 튜토리얼 권장 사항: "Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。【相关教程推荐：《angular教程》】

快速上手

创建页面组件、Layout 组件以及 Navigation 组件，供路由使用

• 创建首页页面组件ng g c pages/home

• 创建关于我们页面组件ng g c pages/about

• 创建布局组件ng g c pages/layout

• 创建导航组件ng g c pages/navigation

创建路由规则

// app.module.ts
import { Routes } from "@angular/router"

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  }
]

引入路由模块并启动

// app.module.ts
import { RouterModule, Routes } from "@angular/router"

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}

添加路由插座

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet>

在导航组件中定义链接

<a routerLink="/home">首页</a>
<a routerLink="/about">关于我们</a>

匹配规则

1、重定向

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "",
    // 重定向
    redirectTo: "home",
    // 完全匹配
    pathMatch: "full"
  }
]

2、<span style="font-size: 16px;">404</span> 页面

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]

路由传参

1、查询参数

<a routerLink="/about" [queryParams]="{ name: &#39;kitty&#39; }">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(query => {
      query.get("name")
    })
  }
}

2、动态参数

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about/:name",
    component: AboutComponent
  }
]

<a [routerLink]="[&#39;/about&#39;, &#39;zhangsan&#39;]">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      params.get("name")
    })
  }
}

路由嵌套

路由嵌套指的是如何定义子级路由

const routes: Routes = [
  {
    path: "about",
    component: AboutComponent,
    children: [
      {
        path: "introduce",
        component: IntroduceComponent
      },
      {
        path: "history",
        component: HistoryComponent
      }
    ]
  }
]

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <a routerLink="/about/introduce">公司简介</a>
  <a routerLink="/about/history">发展历史</a>
  <div>
    <router-outlet></router-outlet>
  </div>
</app-layout>

命名插座

将子级路由组件显示到不同的路由插座中

{
  path: "about",
  component: AboutComponent,
  children: [
    {
      path: "introduce",
      component: IntroduceComponent,
      outlet: "left"
    },
    {
      path: "history",
      component: HistoryComponent,
      outlet: "right"
    }
  ]
}

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <router-outlet name="left"></router-outlet>
  <router-outlet name="right"></router-outlet>
</app-layout>

<a
    [routerLink]="[
      &#39;/about&#39;,
      {
        outlets: {
          left: [&#39;introduce&#39;],
          right: [&#39;history&#39;]
        }
      }
    ]"
>关于我们</a>

导航路由

<!-- app.component.html -->
<button (click)="jump()">跳转到发展历史</button>

// app.component.ts
import { Router } from "@angular/router"

export class HomeComponent {
  constructor(private router: Router) {}
  jump() {
    this.router.navigate(["/about/history"], {
      queryParams: {
        name: "Kitty"
      }
    })
  }
}

路由模块

将根模块中的路由配置抽象成一个单独的路由模块，称之为根路由模块，然后在根模块中引入根路由模块

import { NgModule } from "@angular/core"

import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  // 导出 Angular 路由功能模块，因为在根模块的根组件中使用了 RouterModule 模块中提供的路由插座组件
  exports: [RouterModule]
})
export class AppRoutingModule {}

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"

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

路由懒加载

路由懒加载是以模块为单位的。

• 创建用户模块 ng g m user --routing=true  并创建该模块的路由模块

• 创建登录页面组件 ng g c user/pages/login

• 创建注册页面组件 ng g c user/pages/register

• 配置用户模块的路由规则

import { NgModule } from "@angular/core"
import { Routes, RouterModule } from "@angular/router"
import { LoginComponent } from "./pages/login/login.component"
import { RegisterComponent } from "./pages/register/register.component"

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "register",
    component: RegisterComponent
  }
]

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

• 将用户路由模块关联到主路由模块

  // app-routing.module.ts
  const routes: Routes = [
    {
      path: "user",
      loadChildren: () => import("./user/user.module").then(m => m.UserModule)
    }
  ]

• 在导航组件中添加访问链接

  <a routerLink="/user/login">登录</a>
  <a routerLink="/user/register">注册</a>

路由守卫

路由守卫会告诉路由是否允许导航到请求的路由。

路由守方法可以返回 boolean 或 Observable 78180fd7e2f5f09e138c95a71ada14e6 或 Promise 78180fd7e2f5f09e138c95a71ada14e6，它们在将来的某个时间点解析为布尔值

1、<span style="font-size: 16px;">CanActivate</span>

检查用户是否可以访问某一个路由。

CanActivate 为接口，路由守卫类要实现该接口，该接口规定类中需要有 canActivate 方法，方法决定是否允许访问目标路由。

路由可以应用多个守卫，所有守卫方法都允许，路由才被允许访问，有一个守卫方法不允许，则路由不允许被访问。

创建路由守卫：ng g guard guards/auth

import { Injectable } from "@angular/core"
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from "@angular/router"
import { Observable } from "rxjs"

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(): boolean | UrlTree {
    // 用于实现跳转
    return this.router.createUrlTree(["/user/login"])
    // 禁止访问目标路由
    return false
    // 允许访问目标路由
    return true
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivate: [AuthGuard]
}

2、<span style="font-size: 16px;">CanActivateChild</span>

检查用户是否方可访问某个子路由。

创建路由守卫：ng g guard guards/admin

注意：选择 CanActivateChild，需要将箭头移动到这个选项并且敲击空格确认选择

import { Injectable } from "@angular/core"
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router"
import { Observable } from "rxjs"

@Injectable({
  providedIn: "root"
})
export class AdminGuard implements CanActivateChild {
  canActivateChild(): boolean | UrlTree {
    return true
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivateChild: [AdminGuard],
  children: [
    {
      path: "introduce",
      component: IntroduceComponent
    }
  ]
}

3、<span style="font-size: 16px;">CanDeactivate</span>

检查用户是否可以退出路由。比如用户在表单中输入的内容没有保存，用户又要离开路由，此时可以调用该守卫提示用户

import { Injectable } from "@angular/core"
import {
  CanDeactivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree
} from "@angular/router"
import { Observable } from "rxjs"

export interface CanComponentLeave {
  canLeave: () => boolean
}

@Injectable({
  providedIn: "root"
})
export class UnsaveGuard implements CanDeactivate<CanComponentLeave> {
  canDeactivate(component: CanComponentLeave): boolean {
    if (component.canLeave()) {
      return true
    }
    return false
  }
}

{
  path: "",
  component: HomeComponent,
  canDeactivate: [UnsaveGuard]
}

import { CanComponentLeave } from "src/app/guards/unsave.guard"

export class HomeComponent implements CanComponentLeave {
  myForm: FormGroup = new FormGroup({
    username: new FormControl()
  })
  canLeave(): boolean {
    if (this.myForm.dirty) {
      if (window.confirm("有数据未保存, 确定要离开吗")) {
        return true
      } else {
        return false
      }
    }
    return true
  }

4、<span style="font-size: 16px;">Resolve</span>angular 튜토리얼"]

빠르게 시작하기

페이지 구성 요소, 레이아웃 구성 요소 및 탐색 만들기 라우팅용 구성 요소

• CreateHomepage페이지 구성 요소ng g c 페이지/홈
🎜Create회사 정보🎜페이지 구성 요소ng g c 페이지/about🎜
• 🎜createlayout🎜comComponentng g c 페이지/레이아웃🎜
• 🎜CreateNavigation🎜comComponentng c Pages/navigation🎜

🎜라우팅 규칙 생성🎜

$ ng g resolver <name>

🎜라우팅 모듈 소개 🎜

import { Injectable } from "@angular/core"
import { Resolve } from "@angular/router"

type returnType = Promise<{ name: string }>

@Injectable({
  providedIn: "root"
})
export class ResolveGuard implements Resolve<returnType> {
  resolve(): returnType {
    return new Promise(function (resolve) {
      setTimeout(() => {
        resolve({ name: "张三" })
      }, 2000)
    })
  }
}

🎜라우팅 아웃렛 추가🎜

{
   path: "",
   component: HomeComponent,
   resolve: {
     user: ResolveGuard
   }
}

🎜탐색 구성 요소에서 링크 정의🎜

export class HomeComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    console.log(this.route.snapshot.data.user)
  }
}

일치 규칙

🎜리디렉션🎜🎜rrreee🎜2. <span style="font-size: 16px;">404</span> code> 페이지🎜🎜rrreee

경로 매개변수

1. 쿼리 매개변수🎜

rrreeerrreee🎜동적 매개변수 span>🎜🎜rrreeerrrreeerrreee

경로 중첩🎜

🎜경로 중첩은 하위 경로를 정의하는 방법을 나타냅니다.🎜rrreeerrreee

이름이 지정된 소켓

🎜하위 라우팅 구성 요소를 다른 라우팅 소켓에 표시 🎜 rrreeerrreeerrreee

내비게이션 라우팅 🎜

rrreeerrreee

라우팅 모듈 🎜

🎜은 루트 모듈의 라우팅 구성을 별도의 라우팅 모듈로 추상화합니다. 이를 루트 라우팅 모듈이라고 부릅니다. 그런 다음 루트 라우팅 모듈을 루트 모듈에 도입하세요🎜rrreeerrreee

경로의 지연 로딩

🎜경로의 지연 로딩은 모듈을 기반으로 합니다. 🎜

• 🎜사용자 모듈 ng g m user --routing=true을 생성하고 이 모듈의 라우팅 모듈을 생성합니다🎜
• 🎜로그인 페이지 구성 요소 만들기ng g c user/pages/login🎜
• 🎜등록 페이지 구성 요소 만들기ng g c user/pages/register code>🎜
• 🎜사용자 모듈의 라우팅 규칙 구성🎜

rrreee

• 🎜연결 기본 라우팅 모듈에 대한 사용자 라우팅 모듈 🎜rrreee
• 🎜탐색 구성 요소에 액세스 링크 추가🎜rrreee

Route Guard

🎜Route Guard는 요청에 대한 탐색이 라우팅이 허용되는지 여부를 라우팅합니다. 🎜🎜라우팅 메소드는 미래의 특정 시점에 boolean 또는 Observable 78180fd7e2f5f09e138c95a71ada14e6 또는 Promise 78180fd7e2f5f09e138c95a71ada14e6을 반환할 수 있습니다. 부울로 구문 분석됨 값 🎜🎜1, <span style="font-size: 16px;">활성화 가능</span> 🎜🎜🎜 사용자가 특정 경로에 접근할 수 있는지 확인하세요. 🎜🎜CanActivate는 인터페이스이며 경로 가드 클래스는 이 인터페이스를 구현해야 합니다. 인터페이스는 클래스에 액세스 허용 여부를 결정하는 canActivate 메서드가 있어야 한다고 규정합니다. 대상 경로로 이동합니다. 🎜🎜한 경로에 여러 개의 가드를 적용할 수 있습니다. 모든 가드 방법이 허용된 경우에만 해당 경로에 대한 접근이 허용됩니다. 하나의 가드 방법이 허용되지 않으면 해당 경로에 대한 접근이 허용되지 않습니다. 🎜🎜라우팅 가드 만들기: ng g 가드 가드/인증🎜rrreeerrreee🎜 <span>CanActivateChild</span>🎜🎜🎜사용자가 특정 하위 경로에 액세스할 수 있는지 확인하세요. 🎜🎜경로 가드 만들기: ng g Guardguards/admin🎜

🎜참고: CanActivateChild를 선택하려면 화살표를 이 옵션으로 이동하고 공백을 눌러야 합니다. 선택을 확인하려면🎜

rrreeerrreee🎜3. CanDeactivate 🎜🎜🎜 사용자가 경로를 종료할 수 있는지 확인하세요. 예를 들어, 사용자가 양식에 입력한 내용이 저장되지 않고 사용자가 경로를 벗어나고 싶어하는 경우 경비원을 호출하여 사용자에게 메시지를 표시할 수 있습니다🎜rrreeerrreeerrreee🎜4. <span style="font-size: 16px;">Resolve</span>🎜🎜🎜를 사용하면 경로에 진입하기 전에 데이터를 얻은 후 진입할 수 있습니다. 데이터 수집이 완료된 후의 경로🎜rrreeerrreeerrreeerrreee🎜더 보기 프로그래밍 관련 지식은 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular의 라우팅과 빠르게 시작하는 방법에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!