Erfahren Sie mehr über Routing in Angular und wie Sie schnell loslegen können?-js-Tutorial-php.cn

Dieser Artikel vermittelt Ihnen ein tiefgreifendes Verständnis des Routings in Angular, zeigt Ihnen, wie Sie schnell loslegen können, und führt Sie in Matching-Regeln, Routing-Parameter, Routing-Verschachtelung, Routing-Schutz usw. ein. Ich hoffe, dass er für alle hilfreich sein wird!

Erfahren Sie mehr über Routing in Angular und wie Sie schnell loslegen können?

In Angular basiert das Routing auf Modulen, und jedes Modul kann sein eigenes Routing haben. [Verwandte Tutorial-Empfehlungen: „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
  }
]

Nach dem Login kopieren

引入路由模块并启动

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

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

Nach dem Login kopieren

添加路由插座

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

Nach dem Login kopieren

在导航组件中定义链接

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

Nach dem Login kopieren

匹配规则

1、重定向

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

Nach dem Login kopieren

2、404 页面

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

Nach dem Login kopieren

路由传参

1、查询参数

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

Nach dem Login kopieren

import { ActivatedRoute } from "@angular/router"

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

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

Nach dem Login kopieren

2、动态参数

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

Nach dem Login kopieren

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

Nach dem Login kopieren

import { ActivatedRoute } from "@angular/router"

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

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

Nach dem Login kopieren

路由嵌套

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

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

Nach dem Login kopieren

<!-- 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>

Nach dem Login kopieren

命名插座

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

导航路由

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

路由模块

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

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 {}

Nach dem Login kopieren

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 {}

Nach dem Login kopieren

路由懒加载

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

创建用户模块 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 {}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

路由守卫

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

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

1、CanActivate

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

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
  }
}

Nach dem Login kopieren

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

Nach dem Login kopieren

2、CanActivateChild

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

创建路由守卫：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
  }
}

Nach dem Login kopieren

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

Nach dem Login kopieren

3、CanDeactivate

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

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
  }
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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
  }

Nach dem Login kopieren

4、ResolveAngular Tutorial“]

Schnell loslegen

Erstellen Sie Seitenkomponenten, Layout-Komponenten und Navigation Komponenten, zum Routing verwenden
CreateHomepagePage Componentng g cpages/home
< li>🎜ErstellenÜber uns🎜Seitenkomponenteng g c-Seiten/Über🎜
🎜ErstellenLayout🎜Komponenteng g c-Seiten/Layout< / code>🎜</li><li>🎜ErstellenNavigation🎜component<code>ng g c-Seiten/Navigation🎜
🎜Routing-Regeln erstellen🎜
$ ng g resolver <name>
Nach dem Login kopieren
🎜Routing-Modul einführen und starten Sie 🎜
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) }) } }
Nach dem Login kopieren
🎜Routing-Ausgang hinzufügen🎜
{ path: "", component: HomeComponent, resolve: { user: ResolveGuard } }
Nach dem Login kopieren
🎜Links in der Navigationskomponente definieren🎜
export class HomeComponent { constructor(private route: ActivatedRoute) {} ngOnInit(): void { console.log(this.route.snapshot.data.user) } }
Nach dem Login kopieren
Übereinstimmungsregeln
🎜1. span>🎜rrreee🎜2 404 Seite🎜🎜rrreeeRoutenparameter 1. Abfrageparameter🎜 rrreeerree🎜2. Dynamische Parameter span>🎜🎜rrreeerrrreeerrreeeRoutenverschachtelung🎜 🎜Routenverschachtelung bezieht sich auf die Definition untergeordneter Routen🎜rrreeerrreeeBenannte Sockets 🎜Zeigen Sie untergeordnete Routing-Komponenten in verschiedenen Routing-Sockets an 🎜 rrreeerrreeerrreeeNavigationsrouting 🎜 rrreeerrreeeRouting-Modul 🎜 🎜 abstrahiert die Routing-Konfiguration im Root-Modul in ein separates Routing-Modul. Nennen Sie es das Root-Routing-Modul. und dann das Root-Routing-Modul in das Root-Modul einführen🎜rrreeerrreeeLazy Loading von Routen 🎜Lazy Loading von Routen basiert auf Modulen. 🎜 🎜Erstellen Sie das Benutzermodul ng g m user --routing=true und erstellen Sie das Routingmodul dieses Moduls🎜 🎜Erstellen Sie die Anmeldeseitenkomponenteng g c user/pages/login🎜 🎜Erstellen Sie die Registrierungsseitenkomponenteng g c user/pages/register code>🎜 🎜Konfigurieren Sie die Routing-Regeln des Benutzermoduls🎜 rrreee 🎜Verknüpfen Sie die Benutzer-Routing-Modul zum Haupt-Routing-Modul 🎜rrreee 🎜Zugriffslinks in der Navigationskomponente hinzufügen🎜rrreee Route Guard 🎜Route Guard teilt Ihnen mit Route, ob die Navigation zur angeforderten Route erlaubt sein soll. 🎜🎜Routing-Methoden können boolean oder Observable <boolean> oder Promise <boolean> irgendwann in der Zukunft zurückgeben und als Boolean analysieren Wert 🎜🎜1, CanActivate 🎜🎜🎜 Prüfen Sie, ob der Benutzer auf eine bestimmte Route zugreifen kann. 🎜🎜CanActivate ist eine Schnittstelle, und die Route Guard-Klasse muss diese Schnittstelle implementieren. Die Schnittstelle legt fest, dass die Klasse über eine canActivate-Methode verfügen muss, die bestimmt, ob der Zugriff zugelassen wird zur Zielroute. 🎜🎜Auf eine Route können nur dann mehrere Guards angewendet werden, wenn alle Guard-Methoden zulässig sind. Wenn eine Guard-Methode nicht zulässig ist, ist der Zugriff auf die Route nicht zulässig. 🎜🎜Routing Guard erstellen: ng g Guard Guards/auth🎜rrreeerrreee🎜2 CanActivateChild🎜🎜🎜Überprüfen Sie, ob der Benutzer auf eine bestimmte Unterroute zugreifen kann. 🎜🎜Route Guard erstellen: ng g Guard Guards/admin🎜🎜Hinweis: Um CanActivateChild auszuwählen, müssen Sie den Pfeil auf diese Option bewegen und die Leertaste drücken um die Auswahl zu bestätigen🎜 rrreeerrreee🎜3 CanDeactivate 🎜🎜🎜 Überprüfen Sie, ob der Benutzer die Route verlassen kann. Wenn beispielsweise der vom Benutzer im Formular eingegebene Inhalt nicht gespeichert wird und der Benutzer die Route verlassen möchte, kann der Wächter aufgerufen werden, um den Benutzer aufzufordern🎜rrreeerrreeerrreee🎜4. Resolve🎜🎜🎜ermöglicht es Ihnen, vor der Eingabe der Route Daten abzurufen und diese dann einzugeben die Route nach Abschluss der Datenerfassung🎜rrreeerrreeerrreeerrreee🎜Weitere Informationen zu Programmierkenntnissen finden Sie unter: 🎜Programmiervideo🎜! ! 🎜
Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Routing in Angular und wie Sie schnell loslegen können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!