首页 文章

Angular 2：在app bootstrapping（重定向之前）获取查询参数

提问于
浏览 次
2

目前，我正在实施一个嵌入式聊天系统，允许用户将客户端聊天应用程序嵌入到他们的网站中 . 使用角度2（版本4）的客户端聊天应用程序 . 有2种类型的用户，代理和客户端 . 将使用其凭证和网站ID（在代理注册其网站时创建）来识别客户 . 因此，我需要将网站ID传递给客户端应用程序的每个请求 . 我计划将此网站ID作为查询参数放入url . 但是，当app bootstrapping时，我无法获得此值 .

URL如下所示：

http://localhost:3000?site=123456

这是应用程序路由，在初始化时，将根据登录状态重定向根路径：

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中 . 我怀疑重定向会导致这种情况，任何人都可以指出我出错的地方 . 谢谢 .

angular typescript query-parameters

2 回答

  • 0

    您必须将路由器模块设置为使用哈希，它将在app.module中替换RouterModule
    RouterModule.forRoot（routes，{useHash：true}），

    回复于
  • 1

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

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

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

    回复于

相关问题