Angular-7-Applicationでは、@ ngrxと@ngrx / router-storeを使用して、クエリパラメーターを状態にします。
アプリケーションのいくつかのコンポーネントは、ページ付けされたリストです。すべてのリストがコンポーネントとしてあり、Pagination-Componentがすべてのリストに含まれています。
現在のページはクエリパラメータとしてURLに保存されuser/:userId/agent?page=0、PaginationComponentはから現在のページを取得しますstate.router.state.queryParams.page。ただし、ユーザーがURLuser/:userId/agentにアクセスすると、queryParams.pageundefinedが返されます。
state.router.state.queryParams.page || 0すべてのコンポーネントで使用することでこれを解決できますが、もっと簡単な方法があるのではないかと思います-クエリパラメータのないルートをクエリパラメータのあるルートにリダイレクトできますか？
最も明白なリダイレクトを使用してみました：
{ path: 'user/:userId/agent', redirectTo: '/user/:userId/agent?page=0', pathMatch: 'full' },
{ path: 'user/:userId/agent?page=0', component: AgentListComponent },
しかし、私は得るError: Cannot match any routes. URL Segment: 'user/max/agent'。
私が見つけた唯一の機能要求だったこの1、エラーが表示されます上記の。
特にあなたの質問のために：
クエリパラメータのないルートをクエリパラメータのあるルートにリダイレクトできますか？
私はこれがうまくいくとは思わないので？クエリにはセパレータがあり、URLのクエリ文字列の一部ではありません。
代替案1 -ngrxを使用しているので、それを行う1つの方法は、カスタムシリアライザーを使用することです。ngrx.ioサイトのドキュメントには、シリアル化を使用してパラメーターを返す例が示されています。これは、パラメータが存在しない場合にデフォルトをパラメータに追加するロジックを追加できる場所です。これは各ルートで発生するため、あまり理想的ではない可能性があることを否認しますが、ルートを単純化することができます。
import { Params, RouterStateSnapshot } from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';
export interface RouterStateUrl {
url: string;
params: Params;
queryParams: Params;
}
export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
let route = routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
const {
url,
root: { queryParams },
} = routerState;
const { params } = route;
// Add here
if (<insert url logic> && queryParams.page === undefined) {
queryParams.page = 0;
}
// Only return an object including the URL, params and query params
// instead of the entire snapshot
return { url, params, queryParams };
}
}
代替案2 -HttpClientをラップするか、より好ましくは、これをチェックしてページがない場合はリクエストに追加する汎用ページリストメソッドを作成できます。この回答は、パラメータの追加を実現する方法の例を示しています。
代替案3-ページをパスの一部として使用し、必要に応じて回避策/変更を行ってリクエストを生成できます。
{ path: 'user/:userId/agent', redirectTo: '/user/:userId/agent/0', pathMatch: 'full' },
{ path: 'user/:userId/agent/:page', component: AgentListComponent },
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加