モジュールごとの Angular 学習パスの簡単な分析-jsチュートリアル-php.cn

この記事では、angular のルーティングモジュールを理解し、マッチングルール、ルーティングパラメーター、ルーティングのネスト、名前付きソケット、ナビゲーションルーティング、ルーティングの遅延読み込みなどの関連知識を紹介します。皆さんのお役に立てれば幸いです。

モジュールごとの Angular 学習パスの簡単な分析

Angular では、ルーティングは モジュールに基づいており、各モジュールは独自のルートを持つことができます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

すぐに始めましょう

1. ページコンポーネント、レイアウトコンポーネント、およびナビゲーションを作成しますコンポーネント、ルーティングには

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

ログイン後にコピー

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>

ログイン後にコピー

マッチングルール

## 1. リダイレクト

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

ログイン後にコピー

2. 404 ページ

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    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"
      }
    })
  }
}

ログイン後にコピー

ルーティングモジュール

ルートモジュールのルーティング設定を別のモジュールに抽象化します。ルーティングモジュールは root routing module

と呼ばれ、ルートルーティングモジュールはルートモジュール内に導入されます。

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

ログイン後にコピー

ルーティングの遅延読み込み

ルーティングの遅延読み込みは、module

に基づいています。

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>

ログイン後にコピー

Route Guard

ルートガードは、要求されたルートへのナビゲーションが許可されているかどうかをルートに伝えます。

ルーティングメソッドは、boolean
または

Observable

または 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

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

ログイン後にコピー

プログラミング関連の知識の詳細については、プログラミングビデオ
を参照してください。！
以上がモジュールごとの Angular 学習パスの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。