Angular 2 - 如何传递URL参数？
jjj*_*jjj 21 javascript node.js npm angular
我在Angular 2中创建了一个单页抵押贷款计算器应用程序,它对我来说就像一个学习游乐场(试图更习惯于目前在工作中使用的技术堆栈)...它正在运行http://www.mortgagecalculator123.com如果你想看看它.如果你想看一下,我已经在页面上用Fork Me链接创建了它.
无论如何,我想做的是,能够直接从URL传递变量到我的应用程序,因此我们的Angular 2应用程序可以使用它们.像这样的东西:http://www.mortgagecalculator123.com/？ var1 = ABC&var2 = DEF
我试过跟随,在我的app.component.ts中,我添加了以下内容:
import { Router, ActivatedRoute, Params } from '@angular/router';
AppComponent {
private var1: string;
private var2: string;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.var1 = params['var1'];
this.var2 = params['var2'];
});
console.log(this.var1, this.var2);
}
...
}
但这不起作用,当我运行npm start时,我得到以下错误:
aot/app/app.component.ngfactory.ts(45,30):错误TS2346:提供的参数与调用目标的任何签名都不匹配.
谢谢,任何帮助将不胜感激.
Fab*_*nes 51
我用查询参数工作创建了一个pull请求.我会尽力解释我所做的一切.
之前的答案不起作用的原因是因为您根本没有使用路由器.您创建了一个没有路由的庞大应用组件.为了解决这个问题,我们需要开始使用路由模块,我还建议您阅读这两个教程:路由和路由与导航.
首先,我们需要更改您的index.html,将其添加到您的<head>:
<base href="/">
见这里为什么要补充一点,这一点很重要.
然后,因为您正在使用您AppComponent显示创建新组件所需的一切,我们将调用它RootComponent.在你的index.html变化<my-app>来<root>; 它看起来像这样:
<root>Loading...</root>
现在在你的app文件夹中我们需要创建两个文件,第一个文件root.component.ts将如下所示:
import { Component } from '@angular/core';
@Component({
selector: 'root',
template: `<router-outlet></router-outlet>`,
})
export class RootComponent {
constructor() { }
}
看看我们有<router-outlet></router-outlet>模板,Angular将根据路线注入我们的组件.
我们仍然需要再创建一个文件,这main.route.ts就是它的样子:
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
export const mainRoutes: Routes = [
{ path: '', component: AppComponent }
];
export const mainRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(mainRoutes);
在这个文件中,我们说对于我们的基本路线,我们想要渲染我们的 AppComponent
我们已经创建了新文件,现在我们需要告诉我们的应用程序模块,app.module.ts我们将导入新文件并声明新组件.我们还需要更改我们的boostrap组件:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {AppComponent} from './app.component';
import {RootComponent} from './root.component'; // we import our new RootComponent
import {ChartModule} from 'primeng/primeng';
import {TooltipModule} from 'primeng/primeng';
import { routing, mainRoutingProviders } from './main.routes'; // We also import our Routes
@NgModule({
imports: [
BrowserModule,
ChartModule,
FormsModule,
mainRoutingProviders, // we also need to import our route provider into the module
ReactiveFormsModule,
routing, // and also import our routes declarations
TooltipModule
],
declarations: [AppComponent, RootComponent], // we declare our new RootCpmponent
bootstrap: [RootComponent] // Notice that we are now using our RootComponent to bootstrap our app
})
export class AppModule {
}
现在有了所有这些,我们现在终于可以开始将参数传递给我们的应用程序,AppComponent导入了Router,ActivatedRoute以及Params来自@angular/router所以你AppComponent看起来像这样:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
export class AppComponent implements OnInit, OnDestroy {
private var1: string;
private var2: string;
private sub: Subscription;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
// assign the subscription to a variable so we can unsubscribe to prevent memory leaks
this.sub = this.route.queryParams.subscribe((params: Params) => {
this.var1 = params['var1'];
this.var2 = params['var2'];
console.log(this.var1, this.var2);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
...
}
你可以在这里看到拉取请求
- 这非常有帮助。请注意，Angular 不鼓励使用 `queryParams`，您应该使用 `queryParamMap` 代替。您可以使用 `params['params']['var1']` https://angular.io/guide/router#activated-route 访问参数 (2认同)
| 归档时间： |
|
| 查看次数： |
39734 次 |
| 最近记录： |