首页 > 解决方案 > 角度参数化的默认路由

问题描述

如何使用参数设置默认路由(例如: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: '' },
];

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

标签: htmlangulartypescriptangular-materialangular-router

解决方案


是的,有可能只是改变你的路线

      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){ ... }

将 ActivateRoute 订阅到 ngOnInit

ngOnInit() {

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

    })
}

推荐阅读