Angular5リバースルーティング

Question

ビューにハードコードURLを使用しないようにする組み込み機能や一般的なライブラリはありますか？たぶん、Routesオブジェクトを元に戻し、型セーフなビルダーを生成するためのライブラリがありますか？

私は、このような機能を必要とする2つの理由があります：

1. ハードcodded URLがサポートするのは難しいです、それはハードcodded URLがチェックされませんどこでも
2. 変わるので、あなたは1つの場所でそれを変更することはできませんアプリケーションはRoutes配列を持ち、コンパイル/起動時にすべてをチェックできる可能性があります。

Answer 1

このようなことが必要な場合は、自分で簡単に作成できます。エクスポートしてルートを定数として作成し、使用したい場所にインポートすることができます。

ステップ1

あなたのルートをエクスポートする場所routes.tsと呼ばれるファイルを作成します。

export const HOME = 'home'; 
export const ABOUT = 'about'; 
export const CONTACT = 'contact'; 

ステップ2

あなたがルートを使いたいところはどこでもあなたのroutes.tsファイルをインポートし、あなたのルートを参照してください：

import * as routes from './routes'; 

例1 app.routing.ts：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import * as routes from './routes'; 

const routes: Routes = [ 
    { 
    path: routes.HOME, 
    component: HomeComponent 
    }, 
    { 
    path: routes.ABOUT, 
    component: AboutComponent 
    }, 
    { 
    path: routes.CONTACT, 
    component: ContactComponent 
    }, 
]; 

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

例2 home.component.tsとhome.component.html：

はあなたhome/about/contact.component.tsの内側にあなたのroutes.tsファイルをインポートします。

<a [routerLink]="routes.HOME">Home</a> 
<a [routerLink]="routes.ABOUT">About</a> 
<a [routerLink]="routes.CONTACT">Contact</a> 

あなたの目標

あなたの目標のあなたの両方を達成するため、この方法は：

その後、あなたの変数の方にごhome/about/contact.component.html内参照してください

1. あなたは変数の値を変更することができます（routes.ts ファイル）。
2. routes.ts ファイル内で定義したルートのみを使用します。そうすれば、ルートは常に機能します。