3

検索の商品を表示する検索フィルター ページがあり、ユーザーが検索の商品をクリックするとモーダルに商品の詳細が表示されます。

ユーザーが製品をクリックしたときに、activeRoute の既存の id オプション パラメータをプログラムで設定したいと考えています。これがオプションである理由です。最初の読み込み時には、ユーザーがクリックするまでパラメーターはありません。その後、ブラウザーの URL からコピーして貼り付けることで、特定の製品へのリンクをクリックして共有できます。

これは、オプションのパラメーターをプログラムで設定する私の試みです:

ルート:

export const routerConfig: Routes = [
   {
      component: LandingPageComponent,
      path: "",
   },
   {
      component: FindPageComponent,
      path: "find/:id",
   },
   {
      component: FindPageComponent,
      path: "find",
   },...

activateRoute id のオプション パラメータを設定します。

export class ResultCardComponent {
   @Input() public result: Result;
   @Output() public onResultClicked: EventEmitter<Result> = new EventEmitter<Result>();
   public paramsSub: any;
   public selectedId: any;

   private resultId: string;

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

   public emitResult() {
      this.onResultClicked.emit(this.result);
      this.paramsSub = this.route.params.subscribe((params) => this.selectedId = params["id"]);
      this.router.navigate(["find", this.result.id]);//only doing this as a hack workaround.
   }
}

理想的には、リソースの無駄である物理的なナビゲーションを停止するための最終的なラインを削除したい

編集:これはうまくいくようです:

   public emitResult() {
      //this.onResultClicked.emit(this.result);
      this.route.params['id'] = this.result.id;
   }

ただし、URLは変更されません。ページが再度読み込まれないためだと思います

4

1 に答える 1