设置activatedRoute可选参数“id”,根本不导航
Posted
技术标签:
【中文标题】设置activatedRoute可选参数“id”,根本不导航【英文标题】:Set activatedRoute optional param "id" without navigating at all 【发布时间】:2017-05-16 07:11:49 【问题描述】:我有一个搜索过滤器页面,它显示搜索的产品,并且当用户点击搜索的产品时,还以模式显示产品详细信息。
我现在想在用户单击产品时以编程方式设置已激活路由的现有 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;
但是它不会改变 url,我猜是因为它不会再次加载页面
【问题讨论】:
【参考方案1】:请参阅this response,对于可选参数,我认为您需要使用查询参数!
【讨论】:
以上是关于设置activatedRoute可选参数“id”,根本不导航的主要内容,如果未能解决你的问题,请参考以下文章
typescript 使用参数,数据和快照模拟ActivatedRoute。
Angular 4 - 失败:无法解析 ActivatedRoute 的所有参数:(?, ?, ?, ?, ?, ?, ?, ?)
Angular 测试,为不同的测试用例动态改变 ActivatedRoute 参数