web-dev-qa-db-ja.com

Angular 7？でルートに名前を付ける方法はありますか？

Angular7でルートに名前を付ける方法があるので、[routerLink]="myRouteName" の代わりに [routerLink]="/my/route/path"。

もしそうなら、どうすればこれを達成できますか？

angularangular-routerangular7
8
RafaelTSCS

ルート構成の作成中にルート名を構成したいと考えています。

routes'データプロパティを活用して、ルートに名前を追加できます。 （すべてのルートの小さな余分なデータがパフォーマンスに影響を与えることはありません）。

しかし最初に、ルート名とその実際のパスを保持するための静的プロパティを含むクラスを作成しましょう。

export class RouteNames {
  public static routeNamesObject = {}
}

ルートを定義したルーティングコンポーネントで、次のようにします。

const routes: Routes = [
  {path: "hello/:id", component: HelloComponent, data: {routeName: "Hello1"}},
  {path: "hello", component: HelloComponent, data: { routeName: "Hello2" }}
]

この変数の初期化直後に、RouteNamesクラスの静的プロパティを設定します

routes.forEach((eachRoute) => {
  RouteNames.routeNamesObject[eachRoute.data.routeName] = eachRoute.path;    // now all route paths are added to this prop
})

コンポーネントにパブリック変数を作成して、静的クラスにアクセスします

App.component.tsのように：（インジェクションは必要ありません）

public routeNames = RouteNames;

app.component.htmlは次のようになります。

<button [routerLink]="routeNames.routeNamesObject['Hello2']">Click to Navigate to Hello</button>
8
xyz
<a [routerLink]="routerLinkVariable"></a>

したがって、この変数（routerLinkVariable）はクラス内で定義でき、以下のような値を持つ必要があります

export class myComponent {

     public routerLinkVariable = "/my/route/path"; // the value of the variable is string!
}
6
Mile Mijatovic

あなたのクラスで

public routeName = '/customRoute/myExample'

次に、テンプレートで

[routerLink]="routeName"

これはその価値を引き出すはずです、私はあなたが求めていることをthatsと思います。これは、customRouteが実際に作成した有効なルート名である場合にのみ機能します。

3
dince12

そのために定数ファイルを使用して、他のコンポーネントでも再利用できるようにすることができます。

export const ROUTE_URL = {
    myRouteName: '/my/route/path',
};

あなたが持っている限り。

.TSでその定数を使用し、ビューで使用します。

表示：

<a [routerLink]="routerUrls.myRouteName"></a>

。TS：

public routerUrls= ROUTE_URL;

ルートファイルでも

 { path: 'xyz', loadChildren:  ROUTE_URL.myRouteName},
2
Rohit.007