この記事では、Angular でのルーティングを深く理解し、すぐに始める方法を見て、マッチング ルール、ルーティング パラメーター、ルーティングのネスティング、ルーティング ガードなどを紹介します。誰にとっても役に立つでしょう。役に立ちました!
Angular では、ルーティングはモジュールに基づいており、各モジュールは独自のルートを持つことができます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
ページ コンポーネント、Layout コンポーネント、およびNavigation コンポーネント、ルーティングに使用されます
CreateHomepagePage コンポーネントng g c pages/home
作成会社概要ページ コンポーネントng g c pages/about
レイアウトコンポーネントng g c ページ/レイアウト
ナビゲーションコンポーネントng g c ページ/ナビゲーション
// 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;"></span>404<span style="font-size: 16px;"></span> ページ<span style="font-size: 16px;"></span>const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "**",
component: NotFoundComponent
}
]
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">关于我们</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. 動的パラメータ<span style="font-size: 16px;"></span>const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about/:name",
component: AboutComponent
}
]<a [routerLink]="['/about', 'zhangsan']">关于我们</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]="[
'/about',
{
outlets: {
left: ['introduce'],
right: ['history']
}
}
]"
>关于我们</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 {}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)
}
]ルート ガード メソッドは、
boolean または Observable \<boolean\> または Promise \<boolean\> を返すことができます。これらは、将来のある時点でブール値
1、<span style="font-size: 16px;"></span>CanActivate<span style="font-size: 16px;"></span> に解決されます。 # ユーザーが特定のルートにアクセスできるかどうかを確認します。
はインターフェイスであり、ルート ガード クラスはこのインターフェイスを実装する必要があります。このインターフェイスは、クラスが canActivate メソッドを持つ必要があることを規定しています。ターゲットルートへのアクセスを許可します。 ルートには複数のガードを適用できます。すべてのガード方法が許可されている場合、ルートへのアクセスが許可されます。1 つのガード方法が許可されていない場合、ルートへのアクセスは許可されません。
ルーティング ガードの作成:
ng Guard Guards/auth<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><a routerLink="/user/login">登录</a>
<a routerLink="/user/register">注册</a></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
2、<span style="font-size: 16px;"></span>CanActivateChild <span style="font-size: 16px;"></span>#ユーザーが特定のサブルートにアクセスできるかどうかを確認します。
ng g Guard Guards/admin
注:
を選択するには、矢印を次の位置に移動する必要があります。このオプションを選択し、スペースを押して選択を確認します#
{ path: "about", component: AboutComponent, canActivate: [AuthGuard] }ログイン後にコピー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 } }ログイン後にコピー#3,
CanDeactivate<span style="font-size: 16px;"></span><span style="font-size: 16px;">ユーザーがルーティングを終了できるかどうかを確認します。たとえば、ユーザーがフォームに入力した内容が保存されず、ユーザーがルートから離脱したい場合、警備員を呼び出してユーザーに </span>#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">{
path: "about",
component: AboutComponent,
canActivateChild: [AdminGuard],
children: [
{
path: "introduce",
component: IntroduceComponent
}
]
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">{
path: "",
component: HomeComponent,
canDeactivate: [UnsaveGuard]
}</pre><div class="contentsignin">ログイン後にコピー</div></div>## と促すことができます。 #4、
<span style="font-size: 16px;"></span> 以上がAngular でのルーティングの詳細と、すぐに始める方法について学びましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。ルーティングに入る前にデータの取得を許可し、データの取得が完了してからルーティングに入るようにします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
}$ 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
}
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
