2016-08-18 71 views
0

在路由中,当我们将某个值作为参数从一个组件传递到另一个组件时,传递的参数值将被附加到浏览器URL中......是否有任何方法可以避免? enter image description here如何避免输入参数附加到angular2路由中的浏览器url?

在从快照连接“管理员”的例子是我从home.ts分量通过用户名

我的路由是如下

[![export const routes: RouterConfig = \[ 
    { path: '', component: Login }, 
    { path: 'login', component: Login }, 
    { path: 'Home/:userName', component: Home }, 
    ...HOME_ROUTER_PROVIDERS 
    } 
\] 

export const HOME_ROUTER_PROVIDERS: RouterConfig = \[ 
    { 
     path: 'Home/:userName', 
     component: Home, 
     children: \[ 

      { path: 'Dashboard1', component: Dashboard1 }, 
      { path: 'Dashboard2', component: Dashboard2 }, 
      .... 
    } 
\]][1]][1] 

我home.ts在那里我做navigate.route传递参数

export class Home { 
     userName: any; 
     constructor(private activatedRoute: ActivatedRoute) { 
      console.log("In constructor of Home"); 
      activatedRoute.params.subscribe(params => { 
       this.userName = params['userName'] 
      }); 
     } 
    } 
+0

路由器作业是将状态反映到浏览器URL栏和状态的URL。如果您不想将其中的部分内容反映在URL栏中,请不要使用路由器来维护此状态。除了@MadhuRanjan的答案,请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

回答

2

您可以在您登录组件使用它创建一个UserService你可以通过设置一些variabl e决定登录用户是否是管理员。

而当您的家庭组件被路由时,您可以从UserService中读取角色值,并使用该值执行操作。

希望这有助于!