web-dev-qa-db-ja.com

Angular 2-URLパラメーターを渡す方法？

私はAngular 2で単一ページの住宅ローン計算アプリケーションを作成しました。 http://www.mortgagecalculator123.com ご覧になりたい場合は、ページ上にFork Meリンクを表示して、オープンソースにしたいと思います。

とにかく、私がやりたいことは、URLから直接アプリに変数を渡すことができるようにすることです。そのため、変数はmy 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：提供されたパラメーターが呼び出しターゲットのシグネチャと一致しません。

enter image description here

ありがとう、どんな助けでも大歓迎です。

javascriptnode.jsangularnpm
21
jjj

クエリパラメータが機能するプルリクエストを作成しました。私がやったすべてを説明しようとします。

前の回答が機能しない理由は、ルーターをまったく使用していないためです。ルートのない大規模なアプリコンポーネントを作成しました。ルートモジュールの使用を開始する必要があることを修正するには、次の2つのチュートリアルを読むことをお勧めします： Routing および Routing＆Navigation 。

最初に_index.html_を変更し、これを_<head>_に追加する必要があります。

_<base href="/">
_

here を追加することが重要である理由を参照してください。

その後、AppComponentを使用してすべてを表示するため、新しいコンポーネントを作成するために必要なものをRootComponentと呼びます。 _index.html_で_<my-app>_を_<root>_に変更します。次のようになります。

_<root>Loading...</root>
_

appフォルダー内に2つのファイルを作成する必要があります。最初のファイルは_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_になるファイルをもう1つ作成する必要があります。これは次のようになります。

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

プルリクエストを確認できます こちら

50
Fabio Antunes

Queryparamsを扱っているようです。それらにアクセスするには、以下のコードを試してみてください。

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