Angular でのルートルーティングの詳細な説明-jsチュートリアル-php.cn

Angular でのルートルーティングの詳細な説明

青灯夜游

リリース： 2021-04-15 10:39:13

転載

2420 人が閲覧しました

この記事では、Angular のルーティング (Route) について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular でのルートルーティングの詳細な説明

Angular ルーティング (ルート)

ルーターは、アプリケーション全体の状態を制御するビューオブジェクトとして理解できます。各アプリケーションにはルーターがあり、ルーターのもう 1 つの機能は、各ビューに一意の URL を割り当てることです。この URL を使用して、アプリケーション間を特定のビュー状態にジャンプできます。シングルページアプリケーションは、実際にはビューステートのコレクションです。

関連チュートリアルの推奨事項: 「angular チュートリアル」

シングルページアプリケーション (SPA)

シングルページアプリケーションはホームページです。ページは一度読み込まれるだけで繰り返し更新されず、ページの内容の一部のみを変更するアプリケーションです。 Angular アプリケーションは、Angular のルーターを使用して、ページをリロードせずにユーザーの操作に基づいてページのコンテンツを変更するシングルページアプリケーションです。単一ページのアプリケーションは、ビューステートの集合として理解できます。

ルーティングオブジェクト

Angular でのルートルーティングの詳細な説明

Routes 配列

最初にルーターを構成する必要がありますルーティング情報があり、RouterModule.forRoot メソッドを使用してルーターを構成します。ブラウザの URL が変更されると、ルーターは対応するルートを検索し、それに基づいて表示するコンポーネントを決定します。
基本構成:

const appRoutes: Routes = [
  { path: &#39;common/a&#39;, component: AComponent },
  { path: &#39;common/b/:id&#39;, component: BComponent },
  { path: &#39;**&#39;, component: NotFoundComponent}, // 定义通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

ログイン後にコピー

RouterOutlet ルーターアウトレット

RouterOutlet はルーティングモジュールからのディレクティブであり、その使用法はコンポーネントと似ています。これは、ルーターがこのアウトレットに表示されるコンポーネントを表示するテンプレート内の場所をマークするプレースホルダーとして機能します。

 <h1>组件的内容显示在（Angular でのルート ルーティングの詳細な説明-outlet）下方</h1>
 <Angular でのルート ルーティングの詳細な説明-outlet></Angular でのルート ルーティングの詳細な説明-outlet>

ログイン後にコピー

Router Router

Router オブジェクトを使用して移動します。

constructor(private Angular でのルート ルーティングの詳細な説明: Router) {}

toAComponent() {
    this.Angular でのルート ルーティングの詳細な説明.navigate([&#39;/common/a&#39;]);
    // 或 this.Angular でのルート ルーティングの詳細な説明.navigateUrl(&#39;common/a&#39;);
}

ログイン後にコピー

RouterLink ルーターリンク

ルートリンクの URL は「/」で始まる必要があります。

<a [Angular でのルート ルーティングの詳細な説明Link]="[&#39;/&#39;]">主页</a>
<a [Angular でのルート ルーティングの詳細な説明Link]="[&#39;/common/b&#39;, id]">B组件</a>
<Angular でのルート ルーティングの詳細な説明-outlet></Angular でのルート ルーティングの詳細な説明-outlet>

ログイン後にコピー

ActivatedRoute アクティブ化ルート

現在アクティブ化されているルートのパスとパラメータは、ActivateRoute のルーティングサービスを通じて取得できます。

一般的に使用される属性:

属性	説明
url	ルーティングパスの Observable オブジェクトは、ルーティングパスのさまざまな部分で構成される文字列配列です。
data	Observable、ルートに提供されるデータオブジェクトが含まれます。リゾルブガードによって解決された値も含まれます。
paramMap	現在のルートの必須パラメータとオプションのパラメータで構成されるマップオブジェクトを含む Observable。このマップを使用して、同じ名前のパラメータから単一の値または複数の値を取得します。
queryParamMap	すべてのルートに対して有効なクエリパラメーターで構成されるマップオブジェクトを含む Observable。このマップを使用して、クエリパラメーターから単一の値または複数の値を取得します。

在路由时传递数据

在查询参数中传递数据

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

在路由路径中传递数据

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

在路由配置中传递数据

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 从参数中获取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get(&#39;id&#39;);
    });

   // 或
  // this.activated.snapshot.queryParamMap.get(&#39;id&#39;);

    // 从路径中获取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get(&#39;id&#39;);
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

ログイン後にコピー

snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。

subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。

重定向路由

在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：

// 当访问根路径时会重定向到 home 路径
const appRoutes: Routes = [
  { path: &#39;&#39;, redirectTo: &#39;home&#39;, pathMatch: &#39;full&#39;},
  { path: &#39;home&#39;, component: HomeComponent}
];

ログイン後にコピー

子路由

子路由配置语法：

const appRoutes: Routes = [
  { 
    path: &#39;home&#39;, 
    component: HomeComponent,
    children: [
      { path: &#39;&#39;, component: AComponent},
      { path: &#39;b&#39;, component: BComponent}
    ]
  },
];

ログイン後にコピー

辅助路由

辅助路由又兄弟路由，配置语法：

// 路由配置
{path: &#39;xxx&#39;, component: XxxComponent, outlet:&#39;xxxlet&#39;},
{path: &#39;yyy&#39;, component: XxxComponent, outlet:&#39;yyylet&#39;}

// 使用
<Angular でのルート ルーティングの詳細な説明-outlet></Angular でのルート ルーティングの詳細な説明-outlet>
<Angular でのルート ルーティングの詳細な説明-outlet name="xxxlet"></Angular でのルート ルーティングの詳細な説明-outlet>

// 链接
<a [Angular でのルート ルーティングの詳細な説明Link]="[&#39;/home&#39;,{outlets:{xxxlet: &#39;xxx&#39;}}]">Xxx</a>

ログイン後にコピー

当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。

路由守卫（guard）

CanActivate/CanActiveChild：处理导航到某路由的情况

当用户不满足这个守卫的要求时就不能到达指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}

ログイン後にコピー

CanDeactivate：处理从当前路由离开的情况

如果不满足这个守卫的要求就不能离开该路由。

// 泛型中 AComponent 代表要守卫的组件。
export class DemoGuard2 implements CanDeactivate<AComponent> {
 canDeactivate(component: AComponent): boolean {
   // 根据 component 的信息进行具体操作
   retturn true;
 }
}

ログイン後にコピー

Resolve：在路由激活之前获取路由数据

在进入路由时就可以立刻把数据呈现给用户。

@Injectable()
export AResolve implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get(&#39;id&#39;);
     // 可以根据路由中的信息进行相关操作
  }
}

ログイン後にコピー

最后，需要将路由守卫添加到路由配置中：

const appRoutes: Routes = [
  { 
    path: &#39;common/a&#39;, 
    component: AComponent,
    canActivate: [DemoGurad1],
    canDeactivate: [DemoGuard2],
    resolve: {data: AResolve}
   },
  { path: &#39;common/b/:id&#39;, component: BComponent },
  { path: &#39;**&#39;, component: NotFoundComponent}, // 定义通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})

ログイン後にコピー

更多编程相关知识，请访问：编程入门！！

以上がAngular でのルートルーティングの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。