Angular 2：模块内的路由（二级嵌套路由器插座）

时间：2017-02-15 13:23:15

标签： angular angular2-routing

我一直在玩Angular 2 webpack starter here，它有很多有用的例子。不过，我遇到了路由问题。我已经删除了一些模块＆amp;添加了我自己的一个，其中包含子项（我还不确定使用子模块或子组件是否是最佳实践 - 我目前正在尝试使用组件）。

我的目标是能够在正常情况下切换顶层模块（在本例中为Home和About），但在加载Home模块后，在多个模块之间切换Home模块模板中的子组件（或模块，如果得到更好的支持）。

我试图在<router-outlet>内尝试使用其他Home - 我已尝试过命名＆amp;使用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中的启动几乎相同 - 我刚添加了一个链接到我自己的模块＆amp;删除了其他人：

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模块，组件和＆amp;路由。

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级别？

修改

我已在问题中添加了app.module.ts。另外，在查看我使用的初始项目的基本配置之后，似乎使用子模块可以简化事情 - 特别是barrel模块（可查看here）有一个child-barrel模块，并且它已加载到router-outlet模板中的barrel.component。如果同一级别有一个child-barrel-2模块，那么这就是我正在寻找的东西。

我还找到了this question，其中最佳答案是

  

建议使用模块

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

1 个答案:

答案 0 :(得分：2)

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

修改

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

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

以及路由配置中的代码

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

相关问题
最新问题