Используйте вспомогательные маршруты во вложенных дочерних компонентах

Question

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

Я использую Angular 2.1.2 с маршрутизатором 3.1.2.

parent.module

import { NgModule }             from '@angular/core';
import { RouterModule }         from '@angular/router';
import { BrowserModule }        from '@angular/platform-browser';

import { ParentComponent }      from './parent.component';

import { ChildModule }          from '../child/child.public.module';
import { ChildComponent }       from '../child/child.public.component';

import { OtherModule }          from '../other/other.public.module'


@NgModule({
    imports: [
        ChildModule,
        OtherModule,
        RouterModule.forRoot([
            { path: '', component: ChildComponent }
        ])
    ],
    declarations: [ ParentComponent ],
    bootstrap:    [ ParentComponent ]
}) 

export class ParentModule { }

parent.component

import {Component} from '@angular/core';

    @Component({
        selector: 'my-app',
        template: '<router-outlet></router-outlet>'
    })

export class ParentComponent{ }

child.module

import { NgModule }             from '@angular/core';
import { RouterModule}          from '@angular/router';
import { CommonModule }         from '@angular/common';

import { ChildComponent }       from './child.public.component';

import { OtherComponent }       from '../other/other.public.component'

@NgModule({
    imports: [
        CommonModule,
        OtherModule,
        RouterModule.forChild([
            {path: 'other', component: OtherComponent, outlet: 'child'}
        ])
    ],
    declarations: [ ChildComponent ],
    exports:    [ ChildComponent ],
})
export class ChildModule { }

child.component

import { Component } from '@angular/core';

@Component({

    selector: 'child-view',
    template: '<router-outlet name="child"></router-outlet>',
})

export class ChildComponent{}

Поэтому, когда я пытаюсь перейти к /(child:other), я получаю типичное:

ошибка

Cannot find the outlet child to load 'OtherComponent'

Answer 1

Он не может найти выход маршрутизатора, потому что он не загружается. Попробуйте что-то вроде этого @usche:

RouterModule.forChild([ {path: '', component: ChildComponent}, {path: 'other', component: OtherComponent, outlet: 'child'} ])

таким образом, корневой маршрут дочернего элемента загрузит ChildComponent, где у него есть названный выход, и "другой" маршрут будет загружен внутри него.

Answer 2

Я думаю, что там немного путаницы.

Давайте посмотрим на родительский маршрут:

• единственный доступный маршрут - это путь:"", который загрузит child.component

Для ребенка маршрут

• это в child.module, который совсем не загружается родительским модулем.

Несколько вещей, которые я бы попробовал сначала: - добавить именованный выход в parent.component - добавить маршрут к другому компоненту в родительском маршруте

Посмотри, работает ли это. Как только вы получите это работает....

• загрузите child.module, выполнив это в основном маршруте:

  {path: 'child', loadChildren: 'app / child.module # ChildModule'}

• пример дочернего маршрута:

  {путь: "другое", компонент: OtherComponent, выход: "сторона"}

тогда вы можете просматривать как это:

/ Ребенок /(сторона: другое)

У меня есть рабочий пример, если вы хотите попробовать его: https://github.com/thiagospassos/Angular2-Routing

ура