web-dev-qa-db-ja.com

Angular router：paramを置き換える方法？

3つのURL、_/:projectId/info_、_/:projectId/users_、_/:projectId/users/:userId/profile_があるとします。それらはすべてparam projectIdを持っています。 UIには、あるプロジェクトから別のプロジェクトに切り替えるコンポーネントがあります。だから私は必要です：

  1. 現在のURLを取得
  2. 名前でパラメーターを変更します（例：projectId）
  3. 新しいURLに移動します

したがって、this.router.replaceParam(currentUrl, {projectId: 'project_id_2'})のようなものが必要です。これは_/project_id_1/users/user_id_1/profile_を_/project_id_2/users/user_id_1/profile_（および_:projectId_ paramを持つ他のURL）に変換します

これは単純で一般的な問題だと思っていましたが、1時間で解決策が見つかりませんでした。推奨 here 解決策は最後のコメントで述べたように機能しません

angularangular2-routingangular-routing
13
fedor.belov

現在のURLから特定のリンクに移動するには、次のようなことができます。

 constructor(private route: ActivatedRoute, private router: Router){}
 ngOnInit() {
     this.route.params.subscribe(params => {
         // PARAMS CHANGED ..    

         let id = params['projectid'];    
     });
 }
 navigate(){
     this.router.navigateByUrl(this.router.url.replace(id, newProjectId));
     // replace parameter of navigateByUrl function to your required url
 }

NgOnInit関数では、paramsにサブスクライブしているため、urlパラメーターの変更についてステートメントを監視および実行できます。

7
khush

HTMLまたはTsのいずれかを使用できます

1> HTMLで

_[routerLink]="['../info']"
        Or
[routerLink]="['../users']"
    like this etc...._

2> TypeScriptで

this.router.navigate(['../users'], { relativeTo: this.activatedRoute });
2
Omkar Jadhav

あなたの質問を見て、2つのパラメータを変更したいです。

で述べたように：

https://angular.io/api/router/Router#navigatebyurl

router.navigate([yourprojectId, 'users', youruserId , 'profile'], {relativeTo: route});を実装できます

1
CruelEngine

これはあなたがそれを行うことができる一つの方法です。 urlを取得し、現在のパラメーターを取得します（それらが何であるかわからないように聞こえるので）。projectidとuseridの両方がある場合は、両方を持つパラメーターにルーティングします。 URLが'o'で終わる場合は、/infoルートにあり、's'で終わる場合は/usersルートです。

constructor(private activatedRoute: ActivatedRoute) {}

replacePrarm(projectId) {
  // get current url
  const url = this.router.url;

  // get current params
  this.activatedRoute.params.subscribe((params: Params) => {
       if(params['projectId'] && params['userId']) {
          router.navigate(projectId, 'users', params['userId'], 'profile'], {relativeTo: route});
       } else if (url[url.length - 1] === 'o') {
          router.navigate(projectId, 'info'], {relativeTo: route});
       } else if (url[url.length - 1] === 's') {
          router.navigate(projectId, 'users'], {relativeTo: route});
       }
  });
}

これは、自分がどのルートにいるのかわからないことを前提としていますが、実際には、ユーザー、情報、またはプロファイルにいるのであれば、何らかのアイデアがあるはずです。それ以外の場合は、3つの非常に異なるページに1つのコンポーネントを使用しています。

0
rhavelka

対応するコンポーネント（つまり.tsファイル）に追加する必要があります

import { Subscription } from 'rxjs/Subscription';

以下を使用して@componentを使用します

myVariable: {projectId: string, userId: string};
paramsSubscription: Subscription;


ngOnInit(){
this.myVariable = {
   projectId: this.route.snapshot.params['projectId'],
 // userId: this.route.snapshot.params['userId']
};
this.paramsSubscription = this.route.params
  .subscribe(
    (params: Params) => {
      this.myVariable.projectId = params['projectId'];
    //  this.myVariable.userId = params['userId'];
    }
  );
}

そして、既存のルートを変更することに興味があるメソッド。次のメソッドからルートを変更したいとしましょう。

changeRoute(): void{
   this.router.navigate(['/curentUrl',this.project_id_2, 'users/user_id_1/profile']);
}

これがあなたの助けになることを願っています

0
Prasanna Sasne

Angular 7を使用して、すべてのNavigationEndでルーターの現在の状態を保存するサービスを使用してこれを達成しました。その後、状態ツリーを走査し、後で使用できるパスの配列を構築できます_:projectId_のようなパラメータを見つけて置換します。

パス配列の取得：

_constructor(private router: Router) {
    this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            this.pathArray = this.getPathArray(this.router.routerState.snapshot.root);
        }
    }
}

getPathArray(route: ActivatedRouteSnapshot) {
    let array = [];

    if (route.routeConfig && route.routeConfig.path !== '') {
        array.Push(route.routeConfig.path);
    }

    if (route.firstChild) {
        array = array.concat(this.getPathArray(route.firstChild));
    }

    return array;
}
_

_:projectId_の置き換え：

_replacePathArrayId(id) {
    return this.pathArray.map(path => {
        return path.replace(':projectId', id);
    })
}
_

router.navigate(service.replacePathArrayId(id))を使用して実際にルートを変更します。

0
k0nG

私もこの質問の調査に何時間も費やしたので、自分の解決策も共有したいと思います。

AccountNames（この場合はprojectIds）を切り替えることができるはずのルートにカスタムデータ項目を追加しました。

const routes: Routes = [
 {
   path: 'expenses/:accountName',
   component: ExpenseListComponent,
   data: { changeAccountUrl: ['expenses', ':accountName'] },
 }
];

これにより、コンポーネントがそのアイテムの存在についてactivateRouteのデータを簡単に確認できます。存在する場合は、それを使用してルートを生成できます。

もう1つの利点は、生成されたルートをより詳細に制御できることです。

0
thomai

これは役に立ちますか？

export class MyComponent {

  constructor(private router: Router, private route: ActivatedRoute){}

  public navigate(){
    const projectId = getNewProjectId(route.snapshot.params['projectId']);
    this.router.navigate([
      projectId, 
      this.router.url.substring(this.router.url.indexOf('/') + 1, this.router.url.length)
    ]);
  }
}

よりきめ細かな制御が必要な場合（基本的に、現在のURLがどのように見えるかわからない）、ルートツリーを走査して、ルート構成パスを処理してみてください。 :projectId設定があり、ツリーのどこにいるかに基づいて、router.url構造。

let route = activatedRoute.snapshot;
while (route) {
  if (route.routeConfig && route.routeConfig.path) {
    // Do something with the path
  }
  route = route.parent;
}

これが少し役立つことを願っています:-)

0
Heehaaw

次を使用できます。

this.router.navigate(
      [],
      {
        relativeTo: this.activatedRoute,
        queryParams: {projectId: 'project_id_2'},
        queryParamsHandling: "merge", // remove to replace all query params by provided
      });
0
Gerard Carbó