Angular 2:模块内的路由(二级嵌套路由器 - 出口)

Question

我一直在玩这里找到的Angular 2 webpack启动器,它有很多有用的例子.不过,我遇到了路由问题.我删除了一些模块并添加了我自己的模块,其中包含子项(我仍然不确定使用子模块或子组件是否是最佳实践 - 我目前正在尝试使用组件).

我的目标是能够为正常(顶层模块之间进行切换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模块,组件和路由.

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左右.最近对类似问题的回答表明它现在可以正常工作,但类似的语法对我不起作用.

router-outlets嵌套是一个问题吗？我应该将组件Signup和Login组件定义为模块吗？或者是否有一些其他问题与我定义路由的方式一起,也许是在最高的AppModule级别？

编辑

我已经添加app.module.ts了这个问题.另外,在查看我使用的初始项目的基本配置之后,似乎使用子模块可以简化事情 - 特别是barrel模块(此处可查看)有一个child-barrel模块,并且它被加载到模板中的router-outlet当前barrel.component.如果有一个child-barrel-2同一级别的模块,这将是我正在寻找的那种东西.

我也找到了这个问题,最佳答案说明了这一点

建议使用模块

我是否应该尝试模仿启动器的结构,通过使用模块完成父子关系？

Answer 1

你为什么使用“.” 尝试将<a [routerLink]=" ['./signup'] ">其删除。.你的基本href是什么

编辑

为什么不在模板中尝试这样的事情呢？

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

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

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