この記事では、angular のルーティング モジュールを理解し、マッチング ルール、ルーティング パラメーター、ルーティングのネスト、名前付きソケット、ナビゲーション ルーティング、ルーティングの遅延読み込みなどの関連知識を紹介します。皆さんのお役に立てれば幸いです。
Angular では、ルーティングは モジュールに基づいており、各モジュールは独自のルートを持つことができます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
HomepagePageコンポーネントng g cages/home
ページコンポーネントng g c ページ/概要
コンポーネント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
}
]3. ルーティング モジュールを導入して
// app.module.ts
import { RouterModule, Routes } from "@angular/router"
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}4.
routingソケット<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet></pre><div class="contentsignin">ログイン後にコピー</div></div>5を追加します。コンポーネント リンクの定義
<a routerLink="/home">首页</a> <a routerLink="/about">关于我们</a>
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
},
{
path: "",
// 重定向
redirectTo: "home",
// 完全匹配
pathMatch: "full"
}
]
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
},
{
path: "**",
component: NotFoundComponent
}
]
#1. クエリパラメータ
<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. 動的パラメータ
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"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"
@NgModule({
declarations: [AppComponent，HomeComponent, NotFoundComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}1. ユーザー モジュールの作成ng g m user --routing=true
このモジュールのルーティング モジュールを一緒に作成します
2. ログイン ページ コンポーネントの作成ng g c user/pages/login
3. 登録ページ コンポーネントを作成しますng g c user/pages/register
4. ルーティング ルールを設定しますユーザー モジュール <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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 {}</pre><div class="contentsignin">ログイン後にコピー</div></div>5. ユーザー ルーティング モジュールをメイン ルーティング モジュール
// app-routing.module.ts
const routes: Routes = [
{
path: "user",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
]6. ナビゲーション コンポーネントにアクセス リンクを追加します
<a routerLink="/user/login">登录</a> <a routerLink="/user/register">注册</a>
ルーティング メソッドは、boolean
または
または Promise <boolean> を返すことができます。将来のある時点でブール値として解決されます。 1. CanActivate
ユーザー が特定のルート にアクセスできるかどうかを確認します。
CanActivate はインターフェイス です。ルート ガード クラスはこのインターフェイスを実装する必要があります。このインターフェイスは、クラスがターゲット ルートへのアクセスを許可するかどうかを決定する canActivate メソッドを持つ必要があることを規定しています。
ルーティングは 複数のガードを適用できます。すべてのガード方法が許可されている場合にのみ、ルートへのアクセスが許可されます。1 つのガード方法が許可されていない場合、ルートへのアクセスは許可されません。アクセスされました。
ng g Guardguards/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、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
}
}{
path: "about",
component: AboutComponent,
canActivateChild: [AdminGuard],
children: [
{
path: "introduce",
component: IntroduceComponent
}
]
}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
}
}{
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.解決
ルーティングに入る前にデータを取得できるようにし、データの後にルーティングに入ることができます。取得が完了しました。
ng gsolver を参照してください。 ！ 以上がモジュールごとの Angular 学習パスの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。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)
}
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
