3

我有一个搜索过滤器页面，它显示搜索的产品，并且当用户单击搜索的产品时，还以模式显示产品详细信息。

我现在想在用户单击产品时以编程方式设置已激活路由的现有 id 可选参数。这就是为什么它是可选的 - 在第一次加载时，它没有参数，直到用户点击它 - 然后他们可以通过从浏览器 url 复制并粘贴它来共享该链接到特定产品。

这是我尝试以编程方式设置可选参数：

路线：

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

设置激活路由 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;
   }

但是它不会更改网址，我猜是因为它不会再次加载页面

4

1 回答 1

1

请参阅此回复，对于可选参数，我认为您需要使用查询参数！

于 2017-12-28T15:21:47.600 回答