angular2發送參數使用Rounting到子組件

我想發送一個子組件（resultadoBusqueda.component）一系列的參數在做的時候做一個組件的按鈕，如果我做「this.router.navigate（ [「./resultadoBusqueda」]，navigationExtras）;「不起作用，而如果我使用routerlink「Child One」它會工作並加載組件子，問題是使用routerlink我無法嘗試一系列參數以後再發送它們，我需要在路由器時執行它。導航。任何想法？angular2發送參數使用Rounting到子組件

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)  
],

來源

2017-09-24 ararb78

您也可以傳遞查詢參數RouterLink。在Angular文檔中討論了here。

您可以添加查詢參數是這樣的：

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

來源

2017-09-24 21:33:40 bazzells

，因爲變量「resultadoBusqueda」當我點擊該按鈕被填充，我不能做到這一點。它是根據許多標準填充的，我必須在單擊按鈕時檢查而不是之前。 – ararb78

angular2發送參數使用Rounting到子組件

回答

相關問題