angular2子コンポーネントにRountingを使用してパラメータを送信

Question

コンポーネントのボタンをクリックしたときに、子コンポーネント（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)  
], 

Answer 1

RouterLinkでクエリパラメータを渡すこともできます。 Angularの文書にはhereが記載されています。

あなたはこのようなあなたのクエリのparamsを追加することができます。私はボタンをクリックしたときに、変数「resultadoBusqueda」が移入されますので、私はこれを行うことはできません

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