Angular 2 - 如何傳遞URL參數？

Question

我在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：提供的參數與調用目標的任何簽名都不匹配。

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

Answer 1

我用查詢參數工作創建了一個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告訴我們的App Module ，我們導入新文件並聲明新組件。 我們還需要更改我們的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上從@angular/router導入Router ， ActivatedRoute和Params ，這樣你的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();
  }
...
}

你可以在這里看到拉取請求

Answer 2

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

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

Angular 2 - 如何傳遞URL參數？

問題描述

2 個解決方案

解決方案1
50 已采納 2016-10-07 10:48:29

解決方案2
0 2016-10-04 18:12:11

Angular 2 - 如何傳遞URL參數？

問題描述

2 個解決方案

解決方案1 50 已采納 2016-10-07 10:48:29

解決方案2 0 2016-10-04 18:12:11

解決方案1
50 已采納 2016-10-07 10:48:29

解決方案2
0 2016-10-04 18:12:11