2016-12-21 12 views
0

У меня есть следующие маршрутизацииКак получить доступ к параметрам маршрута в угловом 2,0 из компонентов, не отображенных на маршрутную/маршрутизатор-розетку

const routes: Routes = [ 
    { path: 'metadata/:path', component: MetadataDisplayComponent }, 
    { path: 'data/:path', component: DataDisplayComponent } 
] 

и вот мой AppComponent где Metadata/Дисплей данных компоненты вводятся.

@Component({ 
    selector: 'my-app', 
    template: ` 
     <tree-view></tree-view> <!-- a component the displays a tree like hierarchy of the path --> 
     <router-outlet></router-outlet> 
    ` 
}) 

Так, по существу, я всегда хочу, чтобы вид дерева, чтобы быть там делать свое дело, независимо от состояния метаданных/данных, но мне нужно, чтобы инициализировать его на основе параметра в моих маршрутах.

Теперь моя проблема заключается в том, что моему компоненту «древовидный вид» необходимо получить доступ к переменной «путь», которую я определил в двух маршрутах. Когда я попробовал следующее (внутри моего дерева зрения компонент)

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

@Component({ 
    selector : 'tree-view', 
    // etc... 
}) 

export class TreeViewComponent implements OnInit { 

    private sub: any; 

    contstructor(
     @Inject(ActivatedRoute) private route: ActivatedRoute 
    ) {} 

    ngOnInit(): void { 
     this.sub = this.route.params.subscribe(params => { 
      console.log(params['path']); // this logs "undefined" 
     }); 
    } 

    // added this as per the suggestion in the comments 
    ngAfterViewInit(): void { 
     this.sub = this.route.params.subscribe(params => { 
      console.log(params['path']); // this logs "undefined" 
     }); 
    } 

    // etc... 

} 

Моя попытка доступа к параметру «путь» был неудачным, он был console.logged как «неопределенный».

Когда я пробовал то же самое ngOnInit внутри моего MetadataDisplayComponent, мне удалось пустить путь console.log.

Я почти уверен, что это связано с тем, что мой TreeViewComponent не связан с одним из моих маршрутов и, следовательно, не имеет доступа к переменным маршрута. Он живет рядом, но не в розетке маршрутизатора.

Есть ли способ, которым я могу это сделать? Я признаю, что я, возможно, планировал макет совершенно глупо, и открыт для предложений.

+0

Вашего код не отображается, если впрыскивать ActivatedRoute в переменное этого. маршрут. Вы это делаете? –

+0

Да, я. Я попытался вырезать как можно больше кода, чтобы подчеркнуть проблему. Моя маршрутизация работала с той же самой настройкой в ​​моем MetadataDisplayComponent, поэтому я, по крайней мере, так много работал. – Zack

+0

Попробуйте перенести свою подписку на ngAfterViewInit(). –

ответ

1

После нескольких часов поиска одно и то же это то, что работало

внутри службы/компоненты за пределами маршрутизатора-розеток

this.router.events.subscribe(val => { 
     if (val instanceof NavigationEnd) { 

     let r = this.route; 
     while (r.firstChild) { 
      r = r.firstChild; 
     } 
     r.params.subscribe(params => { 
      //do stuff with params['yourParam'] 
      console.log(params); 
     }); 
     } 
    });