2016-01-26 3 views
3

У меня есть страница «проектов», где я пытаюсь получить доступ к ней или нет, вы смотрите на список элементов или на один элемент, но без использования дочернего компонента.Как получить доступ к дочерним маршрутамParams из родительского компонента?

Рассмотрим:

App конфигурации маршрутизатора

{ path: '/projects/...', component: ProjectCmp, name: 'Projects' }, 

Затем компонент проекта:

{ path: '/', useAsDefault:true,component: ProjectDashboardCmp, name: 'List' }, 
    { path: '/:id/', component: ProjectDashboardCmp, name: 'Dashboard' }, 
    { path: '/:id/shows', component: ShowCmp, name: 'Shows' }, 

Как я могу получить "ID", который передается в "Личном кабинете" Маршрута ? Это не является параметром этого компонента, поэтому я не могу получить к нему доступ без того, чтобы ребенок начал его или службу.

пример, в компоненте проектов:

constructor(public params: RouteParams) { 
    this.projectId = params.get('id'); 
    console.log("The project Id is:",this.projectId); 
    //The Project Id is:null 

Но внутри projectDashboardCmp он работает, как ожидалось.

Этот вопрос я сделать что-то вроде:

<router-outlet *ngIf="!this.projectId"></router-outlet> 

В компоненте проекта, чтобы он никогда не загружать ребенка маршрутов и просто умирает ...

+0

Почему скрыть 'маршрутизатор-outlet'? Почему бы просто не позволить ему быть пустым? Мне нужно больше информации о ваших намерениях, прежде чем я смогу ответить. – SnareChops

+0

Итак, что я делаю, есть набор карточек материального дизайна в списке. Представьте себе сетку типа кладки. Когда вы выбираете проект, страница «перемещается» на эту карту и становится боковой панелью. Он делает это с помощью боковой панели и выхода маршрутизатора, пока не будет необходимости. Поскольку он должен быть «сверху», список проектов не может находиться в одном и том же розетке. Я скрывал выход с помощью NgIf –

+0

. Так что это чисто для удержания навигации, пока анимация не завершится? – SnareChops

ответ

1

Если кто-то заинтересован в том, для доступа ребенка маршруты Params - Вот решение (Угловая 4,0):

// Inside ngOnInit() method of a parent component 
this.route.children[0].params 
    .subscribe((childParams: Params) => this.projectId = +childParams['id']); 

Примечание: this.route.children может иметь несколько дочерних маршрутов. В моем случае - это был только один, поэтому я выбрал его с [0].

В целом, я бы не рекомендовал использовать этот подход, если у вас нет другого выбора

Смежные вопросы