如何避免在angular2路由中附加到浏览器url的输入参数？

Question

在路由中，当我们将某个值作为参数从一个组件传递到另一个组件时，传递的参数值会附加到浏览器 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']
            });
        }
    }

Answer 1

你可以在你的登录组件中创建一个UserService，你可以设置一些变量来决定登录用户是否是管理员。

当您的 Home 组件被路由时，您可以从 UserService 读取角色值并使用该值执行操作。