我有一个搜索过滤器页面,它显示搜索的产品,并在用户点击搜索的产品时以模式显示产品详细信息。
我现在想在用户点击产品时以编程方式设置 activatedRoute 的现有 id 可选参数。这就是为什么它是可选的——在第一次加载时,它没有参数,直到用户点击它——然后他们可以在点击它后通过从浏览器 url 复制并粘贴它来共享指向特定产品的链接。
这是我尝试以编程方式设置可选参数:
路线:
export const routerConfig: Routes = [
{
component: LandingPageComponent,
path: "",
},
{
component: FindPageComponent,
path: "find/:id",
},
{
component: FindPageComponent,
path: "find",
},...
设置activatedRoute 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,我猜是因为它不会再次加载页面
最佳答案
请参阅this response ,对于可选参数,我认为您需要使用查询参数!
关于angular - 设置 activatedRoute 可选参数 "id"完全不导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41422412/