角度参数化的默认路由答案

【问题标题】：Parameterized default route in angular角度参数化的默认路由
【发布时间】：2020-01-27 11:52:39
【问题描述】：

如何使用参数设置默认路由（例如：www.test.com/landing-page?uid=123&mode=front&sid=de8d4）

const routes: Routes = [
  { path: '', redirectTo: 'landing-page', pathMatch: 'full' },

  { path: "landing-page", component: LandingPageComponent },  
  { path: '**', redirectTo: '' },
];

我的项目有一个工作流程，在该工作流程中，用户通过其他网站或带有查询字符串数据的应用程序被重定向到我的 Angular 应用程序。是否可以有带参数的默认路由。

【问题讨论】：

标签： html angular typescript angular-material angular-router

【解决方案1】：

您只需添加：加上路径中的参数：

{ path: "landing-page/:uid/:mode/:sid", component: LandingPageComponent },

【讨论】：

我的查询字符串将采用这种特定格式“?uid=123&mode=front&sid=de8d4”而不是“landing-page/123/front/de8d4”

【解决方案2】：

是的，只是改变你的路线是可能的

      const routes: Routes = [
      { path: '', redirectTo: 'landing-page', pathMatch: 'full' },

      { path: "landing-page, component: LandingPageComponent ,
        children:[
                   { path:':id',component: LandingPageComponent} ]
           },  
      { path: '**', redirectTo: '' },
    ];

在你的组件中导入 ActivateRoute 和 Router 模块，并在构造函数中注入它们

contructor(private route: ActivatedRoute, private router: Router){ ... }

为 ngOnInit 订阅 ActivateRoute

ngOnInit() {

    this.route.queryParams.subscribe(params => {
      console.log(params);

    })
}

【讨论】：

" ?uid=123&mode=front&sid=de8d4 " 应该是默认查询字符串（默认路由）的格式。
localhost:4200/dashboard?uid=123&mode=front&sid=de8d4 使用相同的代码可以访问它之前我错误地在构造函数中添加了 ActivateRoute 将其更改为 ActivatedRoute
不，它不起作用。当我在 url 中手动输入“ localhost:4200/dashboard?uid=123&mode=front&sid=de8d4 ”时，我得到“ localhost:4200/?uid=123&mode=front&sid=de8d4 ”，但没有显示任何内容。
是的，通过默认的路由代码，我能够发送查询参数。无需添加子路由。