2017-03-10 3 views
0

J'essaie de créer un composant qui s'abonne au paramètre id url dans la route activée, puis l'utilise pour appeler un de mes services qui envoie une requête http à un serveur avec l'ID.Comment puis-je chaîner un abonnement à un paramètre url à un abonnement dans un service?

J'ai un itinéraire qui prend dans un id comme si -/article/view/1005

Auparavant, je n'abonnent aux paramètres d'URL, et je viens de détourner l'id de l'url une fois.

Ce fut le code de la classe alors:

ngOnInit() { 
    var id = +this.activatedRoute.snapshot.params["id"]; 

    if (id) { 
     this.articleService.get(id).subscribe(
      article => this.article = article 
     ); 
    } 
    else if (id === 0) { 
     console.log("id is 0: switching to edit mode..."); 
     this.router.navigate(["article/edit", 0]); 
    } 
    else { 
     console.log("Invalid id: routing back to home..."); 
     this.router.navigate([""]); 
    } 
} 

Cependant, je suis venu dans la situation où le même composant peut être acheminé vers plusieurs reprises mais avec des ids chaque fois et le crochet ngOnInit tire seulement la première fois. Je veux donc m'abonner à l'identifiant dans les paramètres de l'URL pour résoudre ce problème.

J'ai essayé de trouver une solution, et j'ai l'impression que c'est un flatmap que je veux utiliser. Cependant, je ne peux pas trouver une bonne source qui montre comment je lier un abonnement aux paramètres d'URL comme celui-ci

this.activatedRoute.params.subscribe((params: Params) => { 
     id = params['id']; 
     console.log(params); 
    }) 

à l'abonnement à mon service de l'article.

+0

Les données récupérées pour l'autre composant sont un composant enfant? – Aravind

+0

Non, j'ai juste le composant dans cet exemple. Il n'a pas de composants enfants. – LayfieldK

Répondre

0

Vous pouvez faire en utilisant la détermination de l'itinéraire ci-dessous

export const appRoutes: Routes = [ 
    ... 
    { 
    path: 'path1/:id', 
    component: YourComponent, 
    resolve: { 
     someObject: ComponentResolve 
    } 
    } 
]; 

@Injectable() 
export class ComponentResolve implements Resolve<Interface> { 

    constructor(private yourService: YourService) {} 

    resolve(route: ActivatedRouteSnapshot) { 
    return this.yourService.getMethod(route.params['id']); 
    } 

Dans votre onInit() abonnez-vous aux données de l'itinéraire avec l'attribut someObject.