ホームページ > 記事 > ウェブフロントエンド > Angular でのルーティングの詳細
Angular でのルーティングの詳細
- 青灯夜游転載
- 2021-09-07 11:30:062353ブラウズ
ルーティングとは何ですか?この記事では、Angular でのルーティングについて詳しく説明します。お役に立てれば幸いです。
ルーティングの概要
ルーティングは、ハッシュをリッスンすることでシングルページ アプリケーションを実装する方法です。または、履歴の変更、さまざまなコンポーネントのレンダリング、ローカル更新の役割を果たし、URL が変更されるたびにサーバーにデータを要求することを回避します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
ルーティング構成
ルーティング モジュールを構成します: approuter.module変更したモジュールを ts
const routes: Routes = [
{ path: "first", component: FirstComponent },
{ path: "parent", component: SecondComponent }
]
@NgModule({
imports: [
CommonModule,
// RouterModule.forRoot方法会返回一个模块，其中包含配置好的Router服务
// 提供者，以及路由库所需的其它提供者。
RouterModule.forRoot(routes, {
// enableTracing: true, // <-- debugging purposes only
// 配置所有的模块预加载，也就是懒加载的模块，在系统空闲时，把懒加载模块加载进来
// PreloadAllModules 策略不会加载被CanLoad守卫所保护的特性区。
preloadingStrategy: PreloadAllModules
})
],
exports: [
FirstComponent,
SecondComponent,
RouterModule
],
declarations: [
FirstComponent,
SecondComponent
]
})
export class ApprouterModule { }app.module.ts:
imports: [ ApprouterModule ]
リダイレクト ルート:
const routes: Routes = [
{ path: "", redirectTo: "first", pathMatch: "full" }
]# に導入します。 ##ワイルドカード ルーティング:
const routes: Routes = [
// 路由器会使用先到先得的策略来选择路由。 由于通配符路由是最不具体的那个，因此务必确保它是路由配置中的最后一个路由。
{ path: "**", component: NotFoundComponent }
]
ルート遅延読み込み:
遅延読み込みモジュールを構成すると、最初の画面 レンダリング速度が速くなり、遅延読み込みルートをクリックした場合にのみ、対応するモジュールが変更されます。const routes: Routes = [
{
path: 'load',
loadChildren: () => import('./load/load.module').then(m => m.ListModule),
// CanLoadModule如果返回false，模块里面的子路由都没有办法访问
canLoad: [CanLoadModule]
},
]
遅延読み込みモジュールのルーティング構成:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadComponent } from './Load.component';
import { RouterModule, Routes } from '@angular/router';
import { LoadTwoComponent } from '../../../app/components/LoadTwo/LoadTwo.component';
import { LoadOneComponent } from '../../../app/components/LoadOne/LoadOne.component';
const routes: Routes = [
{
path: "",
component: LoadComponent,
children: [
{ path: "LoadOne", component: LoadOneComponent },
{ path: "LoadTwo", component: LoadTwoComponent }
]
},
]
@NgModule({
imports: [
CommonModule,
//子模块使用forChild配置
RouterModule.forChild(routes)
],
declarations: [
LoadComponent,
LoadOneComponent,
LoadTwoComponent
]
})
export class LoadModule { }
遅延読み込みモジュールのルーティング ナビゲーション:
<a [routerLink]="[ 'LoadOne' ]">LoadOne</a> <a [routerLink]="[ 'LoadTwo' ]">LoadTwo</a> <router-outlet></router-outlet>
ルート パラメータの受け渡し:
const routes: Routes = [
{ path: "second/:id", component: SecondComponent },
]//routerLinkActive配置路由激活时的类 <a [routerLink]="[ '/second', 12 ]" routerLinkActive="active">second</a>
ルート パラメータの受け渡しの取得: import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-second',
templateUrl: './second.component.html',
styleUrls: ['./second.component.scss']
})
export class SecondComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
ngOnInit() {
console.log(this.activatedRoute.snapshot.params); //{id: "12"}
// console.log(this.activatedRoute);
// 这种形式可以捕获到url输入 /second/18 然后点击<a [routerLink]="[ '/second', 12 ]">second</a>
// 是可以捕获到的。上面那种是捕获不到的。因为不会触发ngOnInit，公用了一个组件实例。
this.activatedRoute.paramMap.pipe(
switchMap((params: ParamMap) => {
console.log(params.get('id'));
return "param";
})).subscribe(() => {
})
}
gotoFirst() {
this.router.navigate(["/first"]);
}
}
<!-- queryParams参数传值 -->
<a [routerLink]="[ '/first' ]" [queryParams]="{name: 'first'}">first</a>
<!-- ts中传值 -->
<!-- this.router.navigate(['/first'],{ queryParams: { name: 'first' }); -->
ルーティング ガードは値を返します。true が返された場合は実行が続行され、false の場合は動作が阻止され、UrlTree は新しいルートに移動します。 ルート ガードは他のルートに移動する可能性があり、その場合は false を返す必要があります。ルート ガードはサーバーの値に依存する場合があります ナビゲートするかどうかを決定します。これにより、Promise または Observable を返すこともでき、ルートは待機します。 戻り値は true または false です。 canActivate はルートに移動します。 canActivateChild はサブルートに移動します。
const routes: Routes = [
{
path: "parent",
component: ParentComponent,
canActivate: [AuthGuard],
children: [
// 无组件子路由
{
path: "",
canActivateChild: [AuthGuardChild],
children: [
{ path: "childOne", component: ChildOneComponent },
{ path: "childTwo", component: ChildTwoComponent }
]
}
],
// 有组件子路由
// children: [
// { path: "childOne", component: ChildOneComponent },
// { path: "childTwo", component: ChildTwoComponent }
// ]
}
]import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): any {
// return true;
// 返回Promise的情况
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve(true);
}, 3000);
})
}
}import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild
} from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class AuthGuardChild implements CanActivateChild {
constructor() {}
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
return true;
}
}parent.component.htmlルート ナビゲーション:
<!-- 使用相对路径 --> <a [routerLink]="[ './childOne' ]">one</a> <!-- 使用绝对路径 --> <a [routerLink]="[ '/parent/childTwo' ]">two</a> <router-outlet></router-outlet>
can情報が保存されていないことをユーザーに通知し、出発ルートを非アクティブ化します。
const routes: Routes = [
{ path: "first", component: FirstComponent, canDeactivate: [CanDeactivateGuard] }
]import { FirstComponent } from './components/first/first.component';
import { RouterStateSnapshot } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class CanDeactivateGuard implements CanDeactivate<any> {
canDeactivate(
component: any,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean {
// component获取到组件实例
console.log(component.isLogin);
return true;
}
}canLoad が遅延読み込みモジュールに入ることができるかどうか:
const routes: Routes = [
{
path: 'load',
loadChildren: () => import('./load/load.module').then(m => m.LoadModule),
// CanLoadModule如果返回false，模块里面的子路由都没有办法访问
canLoad: [CanLoadModule]
}
]import { Route } from '@angular/compiler/src/core';
import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class CanLoadModule implements CanLoad {
canLoad(route: Route): boolean {
return true;
}
}resolve はルーティングに入るまでにかかる時間を構成します。白い画面を避けるためにルーティングに入る前にデータを取得できます
const routes: Routes = [
{ path: "resolve", component: ResolveDemoComponent, resolve: {detail: DetailResolver}
]import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({ providedIn: 'root' })
export class DetailResolver implements Resolve<any> {
constructor() { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve("resolve data");
}, 3000);
})
}
}ResolveDemoComponent の取得solve の値
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const detail = this.route.snapshot.data.detail;
console.log(detail);
}ルーティング イベントのリッスン:
constructor(private router: Router) {
this.router.events.subscribe((event) => {
// NavigationEnd,NavigationCancel,NavigationError,RoutesRecognized
if (event instanceof NavigationStart) {
console.log("NavigationStart");
}
})
}プログラミング関連の知識の詳細については、
プログラミング ビデオ以上がAngular でのルーティングの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。