如何捕获 URL 参数并基于 url 参数重定向到 angular4 中的其他组件

Posted 2023-02-23

【中文标题】如何捕获 URL 参数并基于 url 参数重定向到 angular4 中的其他组件

【英文标题】：How to capture the URL parameters and based in url params redirect to other component in angular4

【发布时间】：2018-08-24 23:29:54

【问题描述】：

我有两个应用程序。 从一个应用程序，我们来到第二个应用程序。 从第一个应用程序

http://localhost:8080/myfirst-portal/?account_number=RDQsssyMDE=&firstname=UssssGhpbA==&lastname=RGFsssuY2U=&role=csssG9ydGFsZmllbGR1c2Vy

当从第一个应用程序到第二个应用程序时，它会向第二个应用程序发送一些数据。

第二次申请 http://localhost:8080/myapp/#/login

基于来自第一个应用程序的 URL prams，我们必须重定向到特定组件。

角度应用程序中的路线

path: '', pathMatch: 'full', redirectTo: '/login' , path: '**', pathMatch: 'full', redirectTo: '/login' ,

实现这一目标的最佳方法是什么？

【问题讨论】：

第一个应用程序不是 Angular 应用程序

【参考方案1】：

订阅路由事件，然后

ngOnInit() 
    this.sub = this.route.params.subscribe(params => 
       this.id = +params['id']; // (+) converts string 'id' to a number

       // apply you condition here
         this.router.navigateByUrl(['show_alunos']);
        
    );
  

如果您想阅读详细说明，您可以阅读此主题 使用click here 有好的话题

另外，配置你的路由文件

RouterModule.forRoot([
   path: 'login', component: LoginComponent ,
   path: 'nomination', component: HomeComponent 
])

尝试使用 NavigationEnd

previousUrl: string;
constructor(router: Router) 
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => 
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  );

【讨论】：

第一个应用程序不是 Angular 应用程序。我需要从第一个应用程序中捕获参数并基于此值，我需要执行重定向到不同的页面

localhost:8080/myfirst-portal/… 到 localhost:8080/myapp/#/login 在第二个需要捕获 account_numbre、firts_name 等。

【参考方案2】：

如果您在第二个应用程序中设置了路由，Angular 路由器将自己完成这项工作。

如果在您的第​​二个应用程序中您有类似的配置，例如：

RouterModule.forRoot([
   path: 'login', component: LoginComponent ,
])

然后您使用如下链接重定向用户： http://secondapplink.com/login

然后，Angular 路由器会自己查找并渲染 Login 组件。

当然，在部署应用程序的生产环境中，您必须设置 URL 重写，以免出现错误。在开发模式下，您不必担心这一点。

【讨论】：

第一个应用程序不是 Angular 应用程序。我需要从第一个应用程序中捕获参数并基于此值，我需要执行重定向到不同的页面