web-dev-qa-db-ja.com

angular 5同じコンポーネントで異なるパラメーターへのルーティング、機能していない

私はangular 5つの基本的な初心者レベルのアプリがあり、5つのコンポーネントしかありません

ルーティングとリンクは次のようになります

//copied from app.module.ts
const appRoutes:Routes = [
  {path:'',component:HomeComponent},
  {path:'items/:cat',component:ItemsComponent},
  {path:'itemdetail/:id',component:ItemdetailComponent},
  {path:'settings',component:SettingsComponent},
];

//copied from navbar.component.html
<ul>
      <li><a [routerLink]="['/']">Home</a></li>
      <li><a [routerLink]="['/items/8']">Rashion</a></li>
      <li><a [routerLink]="['/items/2']">Vegitables</a></li>
      <li><a [routerLink]="['/items/3']">Fruits</a></li>
      <li><a [routerLink]="['/items/7']">Other</a></li>
      <li><a [routerLink]="['/items/5']">Sweets</a></li>
      <li><a [routerLink]="['/settings']">Settings</a></li>          
</ul>

//copied from items.component.ts
ngOnInit(){
    this.cat = this.route.snapshot.params['cat'];
    this.itemsSrv.getItems(this.cat)
            .subscribe((data)=>{
                this.items=data;
            });
}

リンクは異なるコンポーネントに行く場合にのみ機能します。
は、ホームページから/items/2
ただし、アイテムコンポーネントにいるときは、/items/any-parameter
アイテムからはホームまたは設定コンポーネントに移動できますが。
要するに、パラメータが異なっていても同じコンポーネントにナビゲートするようになりました。 enter image description here

1つのことに気付きました。URLが変更されていますが、ページコンテンツは古いページと同じで、新しいURLをリロードしません:(

angularroutingnavigation
13
alamnaryab

したがって、最良の方法はsubscribe for routeを使用することです。

userSubscription: Subscription;
...
ngOnInit() {
   this.userSubscription = this.route.params.subscribe(
            (params: Params) => {
                 //------ some code -----
   })
}

その後、登録を解除する必要があります：

ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}
12
Mohammad Hossein Ganjyar

私はこれが少し遅れていることを知っていますが、私は同じ問題にぶつかり、解決策を見つけました。 this.route.snapshot.paramsを使用してidパラメーターを取得しています。 Angularのドキュメントでは、コンポーネントインスタンスが再利用されない場合にのみスナップショットを使用します。スナップショットはルートパラメータマップの初期値のみを提供し、コンポーネントが再利用されても更新されません。 IDでコンポーネントにルーティングし、（そのコンポーネントを表示しながら）異なるIDで同じコンポーネントの新しいインスタンスにルーティングしようとすると、初期コンポーネントは再利用されますが、ngOnInit（）は二度目と呼ばれます。

問題を修正するには、変更する必要があります。

this.cat = this.route.snapshot.params['cat'];

この形式を使用するには;

ngOnInit() {
  this.cat$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.itemsSrv.getItems(params.get('id')))
  );
}

this.route.paramMapはObservableから返されます。

「ルートパラメータマップは、このコンポーネントの有効期間中に変更できることを意味します」。

Observable（cat $）を使用するには、おそらくコードの他の部分を変更する必要がありますが、コードの一部しか見ることができないため、他の変更についてアドバイスすることはできません。以下のドキュメントには、マイルストーン3の最後にプロジェクトファイル（hero-detail.component.ts）があり、これがどのように機能するかを示しています。

公式ドキュメントはこちらで読むことができます。

Angular2 + Observable paramMapおよびコンポーネントの再利用

これがお役に立てば幸いです！

4
HombreLoco

同じコンポーネントに移動するとき、AngularはngOnInit()メソッドを再起動しません。コードを機能させるには、バージョンを操作する必要があります監視可能なrouteパラメーターの一部であり、その変更をサブスクライブします。 ルーティングに関するAnngular Docs を必ず読んでください。

ngOnInit(){
    this.route.paramMap
        .switchMap(params => this.itemsSrv.getItems(params.get('cat')))
        .subscribe(data => {
            this.items=data;
        });
}

このコンポーネントから移動するときは、このサブスクリプションの登録を解除する必要があります。 ここに議論があります やり方のベストプラクティスについて。

2
Daniel W Strimpel

これが最良の解決策だと思う

constructor(route:ActivatedRoute) {
 route.params.subscribe(val => {
 // put the code from `ngOnInit` here
  });
}

ルーターは、別のルートに移動したときにのみコンポーネントを破棄して再作成します。ルートパラメータまたはクエリパラメータのみが更新され、ルートが同じ場合、コンポーネントは破棄および再作成されません。助けていただければうれしいです。

0
Pullat Junaid

異なるルートパラメータで同じコンポーネントにルーティングしようとする場合。これは私のために働いた。

 getConsingmentwithId(id: number){
    this.router.navigate(['component', id], {relativeTo: this.route.parent});
  }
0
N Deol

私はこの問題に直面していますが、プロジェクトを実行中にそのエラーを取り除くために最善を尽くすのは、ルートにサブスクライブを使用し、イベントのサブスクライブを解除するためにOndestroyインターフェイスを使用することです

    ngOnInit{
       this._router.params.subscribe(param =>{
            // write some code
           let cat=this._router.snapshot.paramMap.get('cat');
          });
}

//その後、登録を解除する必要があります

    ngOnDestroy(){
    }
0
Shubham Singh