Usando Angular 2 rc.1 e TypeScript. Estou tendo muitos problemas para passar parâmetros de roteamento para meu componente quando o componente é carregado em um sub-roteamento. Eu uso o @angular/router-deprecatedpacote.
No meu componente raiz , configurei as rotas da seguinte forma:
@RouteConfig([
{path:'/top', name:'Top', component: EndPointComponent},
{path:'/sub/...', name:'Sub', component: MiddleManComponent}
])
Aqui está o componente do endpoint, onde tento ler os parâmetros
import {Component} from '@angular/core';
import {RouteParams} from '@angular/router-deprecated';
@Component({
template: 'Route Params: {{routeParams.params | json}}'
})
export class EndPointComponent{
constructor(private routeParams:RouteParams){}
}
Aqui está o componente intermediário com o subrotamento para EndPointComponent
import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {EndPointComponent} from "./endpoint.component";
@Component({
directives: [ROUTER_DIRECTIVES]
template: `<router-outlet></router-outlet>`
})
@RouteConfig([
{path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true}
])
export class MiddleManComponent {}
Os parâmetros podem ser lidos com sucesso a partir do routeParamsobjeto de EndPointComponentquando o componente é carregado a partir da rota de nível superior (por exemplo: a rota chamada 'Top' no componente raiz). No entanto, os parâmetros estão sempre vazios quando eu navego para EndPointComponentir através MiddleManComponent(por exemplo: através da rota chamada 'Sub' no componente raiz).
Os roteadores filhos apagam os parâmetros dos pais antes de resolver as rotas? Isso não faz muito sentido, então aposto que estou perdendo alguma coisa. Minha pergunta é simples: como faço para passar parâmetros de rota para um sub-rota?
PS: Tentei construir um plunker para demonstrar essa configuração, mas desisti quando não consegui descobrir por que o aplicativo não carrega.
As rotas secundárias, na verdade, obtêm sua própria instância de RouteParams, diferente da rota primária. Isso é feito para evitar colisões de nomenclatura e facilitar o encapsulamento do componente roteado.
Uma maneira de compartilhar os parâmetros de uma rota primária com um componente carregado por uma rota secundária é por meio de um serviço.
@Injectable()
export class RouteParamService {
constructor(private routeParams: RouteParams) {}
get params() {
return this.routeParams.params;
}
}
@Component({
template: 'Route Params: {{routeParams.params | json}}'
})
export class EndPointComponent{
constructor(private routeParams:RouteParamService){}
}
@Component({
directives: [ROUTER_DIRECTIVES]
template: `<router-outlet></router-outlet>`,
providers: [RouteParamService]
})
@RouteConfig([
{path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true}
])
class MiddleManComponent() { }
O RouteParamService será instanciado no mesmo nível de rota que o MiddleManComponent e, portanto, obterá a mesma instância de RouteParams. Quando seu serviço for injetado em seu componente de rota filho, você poderá acessar os parâmetros de rota pai.
Se você precisar de 2 instâncias de EndPointComponent para carregar em diferentes níveis de árvore de rota, você precisará de outro nível de rota primária, eu acho; ou seja, um componente roteado que encapsula MiddleManComponent e EndPointComponent, entre RootComponent.
RootComponent não é roteado, portanto, você não poderá instanciar RouteParams para o RouteParamService a partir dele. RouteParams é fornecido pelo <router-outlet>componente.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras