/ / angle2子コンポーネントにRountingを使用してパラメータを送信する - 角度、パラメータ、ルーティング、ルータ

angle2子コンポーネントへのRountingを使用してパラメータを送信する - 角度、パラメータ、ルーティング、ルータ

子コンポーネントを送信しようとしています(resultadoBusqueda.component)私が "this.router.navigate([" ./ resultadoBusqueda "]、navigationExtras);を実行すると、コンポーネントのボタンをクリックした時の一連のパラメータ"私はルータリンク "子1"で動作し、コンポーネントの子を読み込む場合、問題はrouterlinkで私は後でそれらを送信する一連のパラメータを試すことができない、私はそれをルータと一緒にする必要があります。ナビゲートする。何か案が?

Busqueda.component.html

<button (click)="EnviarQueryParams()">Enviar query params a resultadoBusquedaComponent.ts</button>
<!--<a [routerLink]="["./resultadoBusqueda"]">Child One</a>-->
<router-outlet></router-outlet>

Busqueda.component.ts

import { Component } from "@angular/core";
import {Router, NavigationExtras} from "@angular/router";

@Component({
selector: "app-busqueda-component",
templateUrl: "./busqueda.component.html",
})

export class BusquedaComponent {
public constructor(private router: Router) { }

EnviarQueryParams(){
let navigationExtras: NavigationExtras = {
queryParams: {
"firstname": "Nic",
"lastname": "Raboy"
}
};
this.router.navigate(["./resultadoBusqueda"], navigationExtras);
}
}

resultadoBusqueda.component.ts(子コンポーネント、このコンポーネントは "Busqueda.Component"のルータコンセントに読み込まれます)

import { Component, OnInit} from "@angular/core";
import { Observable } from "rxjs";
import { Subject } from "rxjs/Subject"
import {ActivatedRoute} from "@angular/router";

@Component({
selector: "app-resultado-busqueda-component",
templateUrl: "./resultadoBusqueda.component.html",
providers: [EmployeeService]
})

export class ResultadoBusquedaComponent  implements OnInit {
public firstname: string;
public lastname: string;
constructor(private _employeeService: EmployeeService,private route:
ActivatedRoute) {    }

ngOnInit() {
this.route.queryParams.subscribe(params => {
this.firstname = params["firstname"];
this.lastname = params["lastname"];
});
}
}

app.module.ts

// Some stuff ...
const appRoutes: Routes = [
{ path: "busqueda", component: BusquedaComponent,
children: [{path: "resultadoBusqueda",  component:
ResultadoBusquedaComponent}]
},
{ path: "employees", component: EmployeeListComponent },
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "**", component: PageNotFoundComponent }
];

// Some stuff ...
imports: [
BrowserModule, FormsModule,  Ng2CompleterModule, HttpModule,
RouterModule.forRoot(appRoutes)
],

回答:

回答№1は0

クエリパラメータを渡すことができます RouterLink 同様に。それは議論された ここに Angularドキュメントで

次のようにクエリのパラメータを追加することができます:

<a routerLink="resultadoBusqueda" [queryParams]="navigationExtras">Child One</a>