[角度] 通过路由进行页面跳转

2 年 ago
新, 韵
4 minutes

首先

在Angular中，有一种名为路由（Routing）的机制作为屏幕转换的手段，涉及URL的导航。
本文将通过一个简单的示例介绍路由的基本用法。

更新信息

2021年1月11日

    記事内で扱ったコードを Angular v11.0.5 で確認しました

工作环境

環境バージョン備考Angular CLIv6.1.3 v11.0.5$ ng --versionAngularv6.1.2 v11.0.5同上TypeScriptv4.0.2同上Node.jsv9.4.0 v12.18.3$ node --versionnpmv6.1.0 v6.14.6$ npm --version
ng版本的结果
$ ng version_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | ‘_ \ / _` | | | | |/ _` | ‘__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 11.0.5
Node: 12.18.3
操作系统: darwin x64

Angular: 11.0.5
… 动画, cli, 常用, 编译器, 编译器-cli, 核心, 表单
… 平台浏览器, 平台浏览器动态, 路由器
Ivy 工作区: 是

包 版本
———————————————————
@angular-devkit/architect 0.1100.5
@angular-devkit/build-angular 0.1100.5
@angular-devkit/core 11.0.5
@angular-devkit/schematics 11.0.5
@schematics/angular 11.0.5
@schematics/update 0.1100.5
rxjs 6.6.0
typescript 4.0.2

利用路由进行页面转换1

如上所述，在Angular中，使用路由来实现涉及URL移动的页面转换，这是通过@angular/router提供的功能实现的。

    • Routes

 

    • RouterModule

 

    • RouterOutlet

 

    RouterLink

由于实际查看代码会更加直观易懂，所以我将提供一些使用这些代码的简单示例代码。

以下是第一个示例代码。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ルーティングによる画面遷移のために必要なモジュール
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { PageAComponent } from './component/page-a/page-a.component';
import { PageBComponent } from './component/page-b/page-b.component';
import { PageCComponent } from './component/page-c/page-c.component';

// Routing を行う対象のコンポーネントを管理する
// path にセットした文字列にマッチしたURLが指定されると、対になっているコンポーネントが表示される
// 下記のように明示する以外にも
//    '' で [/] のルートパスを指定できる
//    '**' でワイルドカードを指定できる
const ROUTE_TABLE: Routes = [
  { path: 'page-a', component: PageAComponent },
  { path: 'page-b', component: PageBComponent },
  { path: 'page-c', component: PageCComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PageAComponent,
    PageBComponent,
    PageCComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTE_TABLE), // 追加. routing の情報を登録する
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div>
  <div class="block-header">
    <p>Routing によるページ切り替えの動作確認を行う</p>
  </div>

  <div class="block-body">
    <ul>
      <!-- routing のためのリンク. routerLink に app.module.ts で定義したテーブル: ROUTE_TABLE に登録した path をセットする -->
      <li><a routerLink="/page-a">Page-Aに遷移</a></li>
      <li><a routerLink="/page-b">Page-Bに遷移</a></li>
      <li><a routerLink="/page-c">Page-Cに遷移</a></li>
    </ul>
  </div>
</div>

<!-- routing で呼び出されたページは router-outlet で確保された領域に反映される -->
<router-outlet></router-outlet>

<p>
  page-a works!
</p>

<p>
  page-b works!
</p>

<p>
  page-c works!
</p>

解释

代码中的所有注释都是解释的。

de shì de.)

    • app.module.ts

ROUTE_TABLE に画面遷移の対象となるコンポーネントと path のオブジェクトを登録する -> ルーティング情報の作成

作成したルーティング情報を RouterModule.forRoot でアプリに登録する

app.component.html

タグは RouterOutlet で提供されているセレクタで、routerLink は RouterLink から提供されているセレクタ
セットした領域に routerLinkに指定したコンポーネントのテンプレート内容が表示される

routerLink にセットする URL は、 ROUTE_TABLE にセットした path と同じ でなければならない

他のテンプレート

文字列を表示するだけの単純なもの

所以，对于ROUTE_TABLE，请再补充一些细节。

ROUTE_TABLE の補足
ROUTE_TABLE で path　を登録する際、以下の動きとなるので覚えておくとデフォルトページやエラーページの表示に役立つと思う。

”　をセットすれば URL のルートパスで表示するコンポーネントを登録できる

** をセットすると、どの URL にも当てはまらない場合に表示するコンポーネントを登録できる

嗯，当你执行上述的示例时

执行结果 (shí jié guǒ)

routing-03.png

点击每个组件的链接可以实现这一点。

    • URL が移動していること

 

    表示される画面が切り替わっていること

可以确认。

通过路由实现的页面跳转2

在上述的例子中，我们确认了通过URL的移动实现了页面跳转，但是在app.component.html中设置的routerLink导致了像“站点导航”那样的界面切换实现。

在下面的示例中，不是将routerLink设置在app.component.html中，而是将其设置在每个页面上，以观察页面本身的切换。

样例代码2

// 前掲のコードとの差分だけ

// Routing を行う対象のコンポーネントを管理する
// path にセットした文字列にマッチしたURLが指定されると、対になっているコンポーネントが表示される
// 下記のように明示する以外にも
//    '' で [/] のルートパスを指定できる
//    '**' でワイルドカードを指定できる
const ROUTE_TABLE: Routes = [
  // [/] パス指定時は page-a を表示する
  { path: '', component: PageAComponent },
  { path: 'page-a', component: PageAComponent },
  { path: 'page-b', component: PageBComponent },
  { path: 'page-c', component: PageCComponent }
];

<!-- routing で呼び出されたページは router-outlet で確保された領域に反映される -->
<router-outlet></router-outlet>

<div>
  <div class="block-header">
    <p>Routing によるページ切り替えの動作確認を行う</p>
  </div>

  <div class="block-body">
    <ul>
      <!-- routing のためのリンク. routerLink に app.module.ts で定義したテーブル: ROUTE_TABLE に登録した path をセットする -->
      <li><a routerLink="/page-b">Page-Bに遷移</a></li>
      <li><a routerLink="/page-c">Page-Cに遷移</a></li>
    </ul>
  </div>
</div>
<p>
  page-a works!
</p>

<div>
  <div class="block-header">
    <p>Routing によるページ切り替えの動作確認を行う</p>
  </div>

  <div class="block-body">
    <ul>
      <!-- routing のためのリンク. routerLink に app.module.ts で定義したテーブル: ROUTE_TABLE に登録した path をセットする -->
      <li><a routerLink="/page-a">Page-Aに遷移</a></li>
      <li><a routerLink="/page-c">Page-Cに遷移</a></li>
    </ul>
  </div>
</div>
<p>
  page-b works!
</p>

<div>
  <div class="block-header">
    <p>Routing によるページ切り替えの動作確認を行う</p>
  </div>

  <div class="block-body">
    <ul>
      <!-- routing のためのリンク. routerLink に app.module.ts で定義したテーブル: ROUTE_TABLE に登録した path をセットする -->
      <li><a routerLink="/page-a">Page-Aに遷移</a></li>
      <li><a routerLink="/page-b">Page-Bに遷移</a></li>
    </ul>
  </div>
</div>
<p>
  page-c works!
</p>

解释

这个样本的重点有三个。

app.module.ts で定義している ROUTE_TABLE で、ルートパス( [/] ) で表示するコンポーネントに page-a.component を指定している

app.component.html には しかセットしていない

page-a, page-b, page-c に各コンポートへの routerLink をセットしている

通过这样做，app.component.html 中将包含

    • アプリ起動時は page-a.component.html の内容が表示される

 

    リンククリックされる毎に該当するコンポーネントのビューだけが表示される

开始行动。

执行结果

    アプリ起動直後
routing-04.png
    Page-Bに遷移をクリックした
routing-05.png
    Page-Cに遷移をクリックした
routing-06.png
    Page-Aに遷移をクリックした
routing-07.png

由于上述的动作所示

基于上述动作所展示的

    • 起動直後はルートパスに指定した page-a.component.html が表示されること

 

    各画面のリンクに応じて画面そのものが切り替わっていること

确实得到了确认。

请参考

    • @angular/router

 

    • Routes

 

    • RouterModule

 

    • RouterOutlet

 

    RouterLink

源代码

本次文章中所创建的代码已经上传至以下位置供参考。

    • ルーティングによる画面遷移1のコード

 

    ルーティングによる画面遷移2のコード
✖
广告
将在 10 秒后关闭
bannerAds