Angular 2 - 如何傳遞URL參數？

我在Angular 2中創建了一個頁面抵押計算器應用程序，它對我來說就像是一個學習遊樂場（試圖更習慣於當前在工作中使用的技術堆棧）......它運行於http://www.mortgagecalculator123.com如果您想查看它。如果您想查看，我已經在頁面上使用Fork Me鏈接開源。Angular 2 - 如何傳遞URL參數？

無論如何，我想要做的是能夠直接從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啓動 ，我得到以下錯誤：

aot/app/app.component.ngfactory.ts（45,30）：錯誤TS2346：提供的參數不匹配調用目標的任何簽名。

謝謝，任何幫助，將不勝感激。

來源

2016-10-04 jjj

我創建了一個查詢參數工作的拉請求。我會盡力解釋我所做的一切。

以前的答案不起作用的原因是因爲你根本沒有使用路由器。您創建了一個沒有路由的大型應用組件。爲了解決這個問題，我們需要開始使用路由模塊，我還建議您閱讀這兩個教程：Routing和Routing & Navigation。

首先，我們需要改變你的index.html，添加到您的<head>：

<base href="/">

見here爲什麼要補充一點，這一點很重要。

然後，因爲您正在使用您的AppComponent來顯示創建需要組件的所有內容，我們將其稱爲RootComponent。在你的index.html上用<root>替代<my-app>;它看起來就像這樣：

<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模塊他們，在你app.module.ts所以我們導入了新的文件，並宣佈新的組件。我們還需要改變我們的自舉分量：這一切

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(); 
    } 
... 
}

你可以看到拉入請求here

來源

2016-10-07 10:48:29

法比奧，這正是我試圖弄清楚整個時間。非常感謝。對於Angular 2，我仍然是一個新手，所以非常感謝您花費寶貴的時間來解釋一切。它不僅現在可以工作，而且按照您所概述的邏輯進行了很好的學習練習。信譽得到50分。 – jjj

@jjj你很受歡迎。我很高興它有幫助。 –

還有一個問題....在app.component.ts，是否需要保持：'私人路由器：路由器'，在65線？看起來這是一個未使用的參數不是？ – jjj

看來你正在處理Queryparams。所以要訪問它們，你可以嘗試下面的代碼，

this.var1= this.route 
     .queryParams 
     .map(params => params['var1']);

來源

2016-10-04 18:12:11 micronyks

當我這樣做，我收到以下錯誤： aot/app/app.component.ngfactory.ts（45,30）：錯誤TS2346：提供的參數不匹配調用目標的任何簽名。 app/app.component.ts（90,39）：錯誤TS2339：屬性'map'在類型'Observable <{[key：string]：any; }>」。 – jjj

我試過使用：import'rxjs/add/operator/map';但後來我回到原始錯誤TS2346：提供的參數不匹配調用目標的任何簽名。瘋狂如何簡單的傳球變得如此複雜... – jjj

現在沒有任何意義可以幫我解決了。 – micronyks

Angular 2 - 如何傳遞URL參數？

回答

相關問題