Angular 2:获取应用引导时的查询参数(重定向前)

Question

目前，我正在实现一个嵌入式聊天系统，允许用户将客户端聊天应用程序嵌入到他们的网站中。使用angular 2(版本4)的客户端聊天应用程序。有两种类型的用户，代理和客户端。客户将使用其凭据和网站ID (代理注册其网站时创建)进行标识。因此，我需要将网站ID传递到客户端应用程序的每个请求中。我打算把这个网站ID放入url作为查询参数。但是，当应用程序启动时，我无法获得此值。

URL如下所示：

http://localhost:3000?site=123456

app路由如下，初始化时会根据登录状态重定向根路径：

const routes: Routes = [
    {
        path: '',
        redirectTo: '/chat',
        pathMatch: 'full'
    }
];

在app组件中，我尝试像这样捕获查询参数：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
    ActivatedRoute, Router, RouterState,
    RouterStateSnapshot
} from "@angular/router";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None

})
export class AppComponent implements OnInit {
    title = 'app works!';

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
        //
    }

    ngOnInit() {
        this.activatedRoute.queryParams.subscribe(p => console.log(p)); // result empty

        console.log(this.router.routerState.snapshot.root.queryParams); // result empty
    }
}

假设用户已经登录，应用程序将重定向到http://localhost:3000/chat，并且我尝试捕获的queryParams返回空(在ngOnInit方法中)，url中的查询参数也像http://localhost:3000/chat一样消失。如果我将查询参数放在slug /chat (例如http://localhost:3000/chat?site=123456)之后，我可以捕获该值，而查询参数仍保留在url中。我怀疑是重定向导致了这一点，谁能指出我哪里错了？谢谢。

Answer 1

您必须将路由器模块设置为使用散列，它将在app.module替换RouterModule中工作

RouterModule.forRoot(路由，{useHash:true})，

Answer 2

您可以使用Guard在路由器更改之前请求路由

函数canActivate可以获取activateRoute: ActivatedRouteSnapshot，状态: RouterStateSnapshot作为参数，查询参数的值在state.root.queryParams.site中找到

不要忘记从函数中返回true值