Angular2:从 URL 访问查询参数时出错
Angular2: Accessing query parameters from URL giving error
我正在尝试从 url
中提取查询参数
https://localhost:8080/myapp/shared?id1=2&id2=4
我需要在 app.component.ts
中使用 id1
和 id2
值。我正在尝试使用 Router, ActivatedRoute, Params from '@angular/router'
但是当我 运行 应用程序时,主页未加载并且我在浏览器控制台中看到以下错误:
Error: StaticInjectorError[t]:
StaticInjectorError[t]:
NullInjectorError: No provider for t!
Stack trace:
LMZF/</yi</t.prototype.get@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:293926
y/<@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237630
y@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237237
这是我的 app.component.ts
的样子:
import { Component, Input, OnInit } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import {Router, ActivatedRoute, Params} from '@angular/router'; //added this import statement
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
// subscribe to router event
this.activatedRoute.params.subscribe((params: Params) => {
let userId = params['id1'];
console.log("parameter is: "+ userId);
});
}
title = 'My First Angular App';
}
事实是,我已经添加了 Router
导致错误的代码,甚至没有加载上面的 url。当我尝试 运行 没有查询参数代码的应用程序时,它 运行 没问题。
尝试过 . Have also looked into another 的解决方案,但没有用。
有人可以解释为什么会这样吗?
更新
在 app.module.ts
中添加了以下导入语句:
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot([{
path: '',
component: AppComponent
},
])
现在,这会加载应用程序,但仍未提取参数。它在浏览器控制台上给出以下错误:
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shared'
更新 2
为各自的 url 添加路由路径解决了控制台错误问题,但我的参数仍然未定义。
RouterModule.forRoot([{
path: '',
component: AppComponent
},
{
path: 'shared',
component: AppComponent
},
])
您正在访问路由模块中指定的路由参数,例如/user/:uid。对于查询参数:
export class AppComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
// subscribe to router event
this.activatedRoute.queryParams.subscribe((params: Params) => {
let userId = params['id1'];
console.log("parameter is: "+ userId);
});
}
您还可以使用 ActivatedRouteSnapshot:
import { ActivatedRouteSnapshot } from '@angular/router';
export class AppComponent implements OnInit {
constructor(private route: ActivatedRouteSnapshot) {}
// added following code for query params
ngOnInit() {
console.log("all parameters: ", this.route.queryParamMap.getAll);
}
我正在尝试从 url
中提取查询参数https://localhost:8080/myapp/shared?id1=2&id2=4
我需要在 app.component.ts
中使用 id1
和 id2
值。我正在尝试使用 Router, ActivatedRoute, Params from '@angular/router'
但是当我 运行 应用程序时,主页未加载并且我在浏览器控制台中看到以下错误:
Error: StaticInjectorError[t]:
StaticInjectorError[t]:
NullInjectorError: No provider for t!
Stack trace:
LMZF/</yi</t.prototype.get@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:293926
y/<@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237630
y@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237237
这是我的 app.component.ts
的样子:
import { Component, Input, OnInit } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import {Router, ActivatedRoute, Params} from '@angular/router'; //added this import statement
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
// subscribe to router event
this.activatedRoute.params.subscribe((params: Params) => {
let userId = params['id1'];
console.log("parameter is: "+ userId);
});
}
title = 'My First Angular App';
}
事实是,我已经添加了 Router
导致错误的代码,甚至没有加载上面的 url。当我尝试 运行 没有查询参数代码的应用程序时,它 运行 没问题。
尝试过
有人可以解释为什么会这样吗?
更新
在 app.module.ts
中添加了以下导入语句:
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot([{
path: '',
component: AppComponent
},
])
现在,这会加载应用程序,但仍未提取参数。它在浏览器控制台上给出以下错误:
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shared'
更新 2
为各自的 url 添加路由路径解决了控制台错误问题,但我的参数仍然未定义。
RouterModule.forRoot([{
path: '',
component: AppComponent
},
{
path: 'shared',
component: AppComponent
},
])
您正在访问路由模块中指定的路由参数,例如/user/:uid。对于查询参数:
export class AppComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
// subscribe to router event
this.activatedRoute.queryParams.subscribe((params: Params) => {
let userId = params['id1'];
console.log("parameter is: "+ userId);
});
}
您还可以使用 ActivatedRouteSnapshot:
import { ActivatedRouteSnapshot } from '@angular/router';
export class AppComponent implements OnInit {
constructor(private route: ActivatedRouteSnapshot) {}
// added following code for query params
ngOnInit() {
console.log("all parameters: ", this.route.queryParamMap.getAll);
}