Angular 2 : routing within a module (secondary nested router-outlet)

Question

我一直在研究发现的 Angular 2 webpack starter 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，它几乎与启动程序库中的一样 - 我只是添加了一个链接到我自己的模块并删除了其他模块:

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路由器 socket 。

我试过配置 Signup作为一个模块，但这对我也没有用——我认为有一些我不理解的额外配置，并且认为将 child 视为组件将帮助我理解基本的必需路由。

从研究这个问题来看，似乎没有很好地支持多个路由器 socket ，尤其是将它们与 router-link 一起使用语法，直到大约 RC5。 This recent answer一个类似的问题表明它现在确实有效，但类似的语法对我不起作用。

router-outlets 有问题吗？嵌套？我应该定义 Signup 吗？和 Login组件作为模块？还是我定义路由的方式存在其他一些问题，也许是在 AppModule 的最上层？

编辑

我添加了 app.module.ts到这个问题。此外，在查看了我使用的启动项目的基本配置之后，似乎使用子模块可以简化事情——特别是 barrel。模块(可见 here )有一个 child-barrel模块，它被加载到 router-outlet出现在 barrel.component模板。如果有child-barrel-2同一级别的模块，这将是我正在寻找的东西。

我还找到了this question ，其中最高答案指出

Modules are recommended

我是否应该尝试模仿启动器的结构，其中父子关系是通过使用模块来实现的？

Answer 1

为什么要使用“.”在 <a [routerLink]=" ['./signup'] "> 中的“/”之前尝试删除它。 .你的基础 href 是什么

编辑

你为什么不在模板中尝试这样的东西。

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

以及路由配置中的以下代码

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