角度擦除所有查询参数 [英] Angular erasing all query parameters

问题描述

与以下内容有关，但不是重复的内容:

Related to but not a duplicate of: How to keep query string parameters in URL when accessing a route of an Angular 2 app?

我有一个非常基本的Angular应用程序，当我添加查询参数时，会在代码到达app.component构造函数之前将其删除(从浏览器的url以及其他出现的地方).

I have a very basic Angular app, and when I add a query parameter, it's erased (from the browser's url and everywhere else it would seem) before the code hits the app.component constructor.

注意:查询参数似乎是在初始加载(以及随后的重新加载)中被删除的

Note: it is on the initial load (and subsequent reloads) that query parameters appear to be stripped

示例:导航到localhost:8081/calculator?a=1更改为localhost:8081/calculator

我已经在Angular 4.3.1、4.4.6和5.0.4中进行了尝试，结果相同.

I've tried this in Angular 4.3.1, 4.4.6 and 5.0.4, with the same result.

这是我的路线配置:

const appRoutes: Routes = [
    {
        path: 'calculator',
        component: CalculatorComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是主要应用程序组件的构造函数:

Here's the main app component's constructor:

public constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered app constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('app', params);
    });
}

这是计算器组件的构造函数:

Here's the calculator component's constructor:

constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered calc constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('calc', params);
    });
}

这是我在Chrome浏览器中看到的日志:

Here's the log I see in chrome:

为什么我的查询参数被删除?

Why is my query parameter erased?

更新 我确实在应用程序组件中配置了导航，如下所示:

UPDATE I do have navigation configured in the app component like so:

let navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true
};
this.router.navigate(['/calculator'], navigationExtras);

请注意，尽管查询参数在到达此处之前就已经消失了……

Note that the query parameters are already gone before it gets here though...

推荐答案

您遇到的问题是因为您在打电话 this.router.navigate(['/calculator'], navigationExtras); 在您的应用程序组件构造函数或OnInit中.请记住，queryParamMap是可观察的，因此，当您调用Navigation时，该调用将在您的订户被调用之前发生.要解决您的问题，只需删除导航呼叫.如果您希望您的应用程序组件自动重定向到计算器，最简单的安全方法是仅更改路径以包括:

The issue you are having is because you are calling this.router.navigate(['/calculator'], navigationExtras); inside your app component constructor or OnInit. Remember that queryParamMap is an observable, and so when you call navigate, the call will happen before your subscriber gets called. To fix your problem, just remove the navigate call. If you want your app component to autoredirect to calculator, the simplest safe method is to just change your paths to include:

routes: Routes = [ {path: '', redirectTo: 'calculator', pathMatch: 'full'}, ... ]

routes: Routes = [ {path: '', redirectTo: 'calculator', pathMatch: 'full'}, ... ]

有一个 plunker 可以说明这一点.为了使pl弹吉他工作，我还是使用了HashLocation策略，因此请确保在播放时使用/#/....

There is a plunker that should illustrate this. To get routing in plunker working I used HashLocation strategy though, so make sure you use /#/... when playing.

这篇关于角度擦除所有查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！