Angular 2路由到非角度URL,包括查询字符串参数

时间:2017-03-20 15:45:28

标签: angular query-string angular2-routing

我试图有条件地将角度2路由重定向到包含查询字符串参数的外部URL。

IE用户可以点击用户个人资料按钮下拉列表中的链接,如果服务器之前已经表明他们属于特定公司,则会链接到外部页面,否则该相同的按钮将通过正常的角度单页应用路由系统。

我目前的做法是订阅导航开始事件并将窗口位置href更改为指向外部网站。

根据我如何处理此任务,我遇到了两个不同的问题

1

如果查询字符串与routerLink路径一起传递,则查询字符串在传递到远程网站之前进行转义。

如果我在订阅中更正了这一点,浏览器后退按钮仍将返回未修正的网址。

例如以下代码

在html模板中。

    <a [routerLink]="['/profile?id=1']" > profile </a>

并在app.component

    this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
             if(conditional logic here){  
                 let url: string = "http://example.com" + event.url
                 window.location.href = url;
             }
          }
    }

会产生网址http://example.com/profile%3Fid%3D1

如果我替换订阅中的转义,它就变成了       http://example.com/profile?id=1 但是浏览器后退按钮会转到已损坏的网址并加载错误页面。

2

由于上述错误,我试图通过路由器链接中的give参数传递查询字符串,如下面的SO问题所述。

How to handle query parameters in angular 2

新的路由器链接看起来像

个人资料

并生成如下所示的网址 http://example.com?0=%3F&1=i&2=d&3=%3D&4=1

这似乎是使用子路由,因此如所述帖子中提到的矩阵参数。

我不确定为什么会出现这种情况,因为我的routing.ts很简单且没有子节点。

const routes: Routes = [
{path: '**', component: RouteComponent}];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class RoutingModule { }

此外,它似乎仍在逃避特殊字符

我的第一个问题是,是否有正式或更好的方式将角度路由重定向到外部网站(包括查询字符串参数)

如果没有,我会很感激有关如何

的任何想法

一个。防止角度转义查询字符串参数

湾在我替换转义字符之前阻止后退按钮识别网址。(比如取消导航开始事件)

℃。防止角度将参数转换为矩阵参数。

感谢您提供的任何帮助

0 个答案:

没有答案