Угловой 2: маршрутизация внутри модуля (вторичный вложенный роутер-розетка)

Question

Я играл с стартовым устройством с угловым 2, найденным here, которое имеет массу полезных примеров. Тем не менее, я столкнулся с проблемой маршрутизации. Я удалил несколько модулей & добавил один из моих собственных, в котором есть дети (я все еще не уверен, что использование дочерних модулей или дочерних компонентов было бы лучшей практикой - я сейчас пытаюсь это использовать с компонентами).

Моя цель состоит в том, чтобы иметь возможность переключаться между модулями верхнего уровня в нормальном режиме (Home и About, в данном случае), но после загрузки моего Home модуля, обмена между несколькими компонентами ребенка (или модулями, если это лучше поддерживается) в шаблоне модуля Home.

Я пытаюсь использовать другой <router-outlet> в Home - Я пытался назвать его & использованием outlet в параметре Я определение маршрутизации Home модуля, но при нажатии ссылки для загрузки в Home в настоящее время не работает. Код ниже:

Это моя текущая структура приложения (с большей частью дополнительной WebPack вещей опущена):

app 
    |-app.component.ts (template contains router-outlet) 
    |-app.module.ts 
    |-app.routes.ts 
    |-about 
    |-about.component.ts 
    |-about.component.html 
    |-home 
    |-home.module.ts 
    |-home.component.ts 
    |-home.component.html (contains router outlet for children) 
    |-home.routes.ts 
    |-signup 
     |-signup.component.ts 
     |-signup.component.html 
    |-login 
     |-login.component.ts 
     |-login.component.html 

Это мой app.component, что почти такие же, как она начинается в стартере repo- Я просто добавил ссылку на мой собственный модуль & удалены другие:

app.component.ts

import { 
Component, 
    OnInit, 
    ViewEncapsulation 
} from '@angular/core'; 

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css' 
    ], 
    template: ` 
    <nav> 
     <a [routerLink]=" ['./home'] " routerLinkActive="active"> 
     Home 
     </a>  
     <a [routerLink]=" ['./about'] " routerLinkActive="active"> 
     About 
     </a> 
    </nav> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    ` 
}) 
export class AppComponent implements OnInit { 

    constructor(
    public appState: AppState 
) {} 

    public ngOnInit() { 
    console.log('Initial App State', this.appState.state); 
    } 

} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { 
    NgModule, 
    ApplicationRef 
} from '@angular/core'; 
import { 
    removeNgStyles, 
    createNewHosts, 
    createInputTransfer 
} from '@angularclass/hmr'; 
import { 
    RouterModule, 
    PreloadAllModules 
} from '@angular/router'; 

/* 
* Platform and Environment providers/directives/pipes 
*/ 
import { ENV_PROVIDERS } from './environment'; 
import { ROUTES } from './app.routes'; 
// App is our top level component 
import { AppComponent } from './app.component'; 
import { APP_RESOLVER_PROVIDERS } from './app.resolver'; 
import { AppState, InternalStateType } from './app.service'; 
import { AboutComponent } from './about'; 
import { HomeModule } from './home'; 
import { XLargeDirective } from './home/x-large'; 

// app services needed globally 
import { AuthenticationService, UserService, AlertService } from './shared'; 

import '../styles/styles.scss'; 
import '../styles/headings.css'; 

// Application wide providers 
const APP_PROVIDERS = [ 
    ...APP_RESOLVER_PROVIDERS, 
    AppState 
]; 

type StoreType = { 
    state: InternalStateType, 
    restoreInputValues:() => void, 
    disposeOldHosts:() => void 
}; 

/** 
* `AppModule` is the main entry point into Angular2's bootstraping process 
*/ 
@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
    AppComponent, 
    AboutComponent, 
    NoContentComponent, 
    XLargeDirective 
    ], 
    imports: [ // import Angular's modules 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules }) 
    ], 
    providers: [ // expose our Services and Providers into Angular's dependency injection 
    ENV_PROVIDERS, 
    APP_PROVIDERS, 
    UserService, 
    AuthenticationService, 
    AlertService 
    ] 
}) 
export class AppModule { 

    constructor(
    public appRef: ApplicationRef, 
    public appState: AppState 
) {} 

} 

app.routes.ts

import { Routes } from '@angular/router'; 
import { HomeModule } from './home'; 
import { AboutComponent } from './about'; 

import { DataResolver } from './app.resolver'; 

export const ROUTES: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'home', loadChildren: './home#HomeModule' }, 
    { path: '**', redirectTo: '/home', pathMatch: 'full' } 
]; 

Навигация на мой домашний модуль работает мелко- Я думаю, что проблема маршрутизации внутри него. Это модуль Home, компонент, & маршрутизации.

home.module.ts

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

import { routes } from './home.routes'; 
import { HomeComponent } from './home.component'; 
import { SignupComponent } from './signup/signup.component'; 
import { LoginComponent } from './login/login.component'; 

console.log('`Home` loaded'); 

@NgModule({ 
    declarations: [ 
    // Components/Directives/ Pipes 
    HomeComponent, 
    SignupComponent, 
    LoginComponent 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild(routes), 
    ], 
}) 
export class HomeModule { 
    public static routes = routes; 
} 

home.component.ts

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

@Component({ 
    selector: 'home', 
    styleUrls: [ './home.component.css' ], 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent implements { 

} 

home.component.html

<h1>Home</h1> 
<div> 
    <h2>Hello from home module</h2> 
</div> 
<span> 
    <a [routerLink]=" ['./signup'] "> 
    Sign Up 
    </a> 
</span> 
<span> 
    <a [routerLink]=" ['./login'] "> 
    Login 
    </a> 
</span> 
<router-outlet name="aux"></router-outlet> 
<div> 
    <h2>Bottom info</h2> 
</div> 

home.routes.ts

import { HomeComponent } from './home.component'; 
import { SignupComponent } from './signup/signup.component'; 
import { LoginComponent } from './login/login.component'; 

export const routes = [ 
    { path: '', 
     component: HomeComponent, 
     children: [ 
      { 
       path: 'signup', 
       component: SignupComponent, 
       outlet: 'aux' 
      }, 
      { 
       path: 'login', 
       component: LoginComponent, 
       outlet: 'aux' 
      } 
     ] } 
]; 

Текущее поведение является то, что ничего не происходит, когда я нажимаю один из ссылок на Signup или Login - без ошибок, но компоненты не загружаются в aux маршрутизатор-розетки, либо ,

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

Исследуя этот вопрос, кажется, что несколько маршрутизаторов не поддерживаются, особенно используя их с синтаксисом router-link, вплоть до RC5. This recent answer к аналогичному вопросу предполагает, что он работает сейчас, но аналогичный синтаксис для меня не работает.

Является ли проблема, связанная с вложением в router-outlets? Должен ли я определять компоненты Signup и Login в качестве модулей? Или есть какая-то другая проблема в целом с тем, как я определил маршрутизацию, возможно, на самом верхнем уровне AppModule?

EDIT

Я добавил app.module.ts к этому вопросу. Кроме того, рассмотрев базовую конфигурацию проекта стартера, который я использовал, похоже, что использование дочерних модулей может упростить вещи - в частности, модуль barrel (видимый here) имеет модуль child-barrel, и он загружается в router-outlet, присутствующий в шаблоне barrel.component. Если бы на одном уровне был модуль child-barrel-2, это было бы тем, что я ищу.

Я также нашел this question, где верхний ответ заявляет, что

модули рекомендуется

Должен ли я пытаться имитировать структуру стартера, где выполнил отношения родитель-ребенок используя модули?

Answer 1

Почему вы используете '.' перед «/» в <a [routerLink]=" ['./signup'] "> Попробуйте удалить его. .what ваша база HREF

EDIT

Почему бы вам не попробовать что-то вроде этого в шаблоне.

<a [routerLink]="[{outlets: {primary: 'home', aux: 'signup'}}]">signup </a>

и ниже кода маршрутов конфигурации

{path: 'signup', component: signUpComponent, outlet:"aux"}