Question

我有多个选项可以进入列表的详细信息页面，例如： 1）选项 2）选项1 3）选项2 4）选项3 所有选项都会转到具有不同内容的同一详细信息页面，我在URL中想要的是用户选择的内容，例如： mydoamin / option / detail-page或mydoamin / option 1 / detail-page

无论用户选择什么，我都希望在我的网址上按照要求进行操作，并且我会从服务器动态获取这些选项。

请为此提出建议。

Answer 1

你可以这样做：

changePath(path: string) {
  this.router.navigate(['mydoamin/' + path + '/detail-page'])
};

此外，在constructor()导入Router这样：constructor(private router: Router)。

然后，从html页面（详细信息页面）调用此函数并传递路径（动态路径）。像这样：

<button (click)="changePath(dynamicPathName)">Change Page</button>

（可选）您可以将queryParams传递给路由器，如下所示：this.route.navigate(['path'], {queryParams: {params: id}}

Answer 2

您可以查看Angular Route Defination with paramater。

您可以在此处为路由策略中的动态参数定义占位符

{ path: 'custom/:param', component: CustomComponent }

可以使用ActivatedRoute

访问相同内容

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
export class CustomComponent implements OnInit {
  constructor(
    private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        console.log(params.get('param')))
    );
  }
}

您可以关注example from angular guide了解更多信息

如何在URL Angular 2中动态添加路径路径

2 个答案: