Question

我有一个Angular 2应用程序。主屏幕（app？）看起来像这样......

当您单击顶级菜单routerLinks中的项目时，新组件将加载到主视图路由器插座中。其中一个链接加载一个新的“管理”模块/组件，它有自己的路由和新的路由器插座...

然后当您单击左侧导航栏中的routerLinks时，新的管理员组件将加载到新的路由器插座中。

但是...

Angular 2不允许超过1个路由器插座。因此，点击左侧导航栏中的任何routerLink只会替换整个初始路由器插座视图。

我在使用“bootstrap”加载后续组件时看到了一些SO帖子（较旧，可能已弃用），但我无法让它工作。我甚至不能import { bootstrap } from 'anywhere at all, nothing works'。所以也许这不是这样做的方式。

如何让Admin子应用程序部分正常工作？

非常感谢您分享您的Angular 2专业知识： - ）

编辑：尝试以下建议的解决方案。无论我在何处放置路线，都在app.routes.ts基地或子应用admin.routes.ts中，无论我如何格式化routerLinks，我一直收到这个错误......

再次编辑：以下是路由器和模板中的代码......

<!--
    ============================================================================
    /src/app/component/admin/admin.component.html
-->

<!-- Row for entire page columnar dispaly -->
<div class="row">

    <!-- Column 1: Left navigation, links to all admin components -->
    <div class="col col-md-4">
        <app-admin-nav></app-admin-nav>
    </div>

    <!-- Column 2: Rows of records, click to edit -->
    <div class="col col-md-8">
        <router-outlet name="admin-app"></router-outlet>
    </div>

</div>

// ============================================================================
// /src/app/app.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { GameComponent } from './component/game/game.component';
import { HomeComponent } from './component/home/home.component';
import { LoginComponent } from './component/login/login.component';
import { PlayerComponent } from './component/player/player.component';
import { AuthGuard } from './service/auth/auth.service';
import { SignupComponent } from './component/signup/signup.component';
import { EmailComponent } from './component/email/email.component';
import { AdminComponent } from './component/admin/admin.component';
// import { AdminWorldComponent } from './component/admin/world/admin-world.component';
// import { AdminModuleComponent } from './component/admin/module/admin-module.component';
// import { AdminRegionComponent } from './component/admin/region/admin-region.component';

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' }
    , { path: 'home', component: HomeComponent }
    , { path: 'game', component: GameComponent, canActivate: [AuthGuard] }
    , { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
    // , {
    //     path: 'admin', component: AdminComponent, canActivate: [AuthGuard],
    //     children: [
    //         { path: 'world', component: AdminWorldComponent, outlet: 'admin-app' },
    //         { path: 'module', component: AdminModuleComponent, outlet: 'admin-app' },
    //         { path: 'region', component: AdminRegionComponent, outlet: 'admin-app' }
    //     ]
    // },
    , { path: 'login', component: LoginComponent }
    , { path: 'signup', component: SignupComponent }
    , { path: 'login-email', component: EmailComponent }
    , { path: 'players', component: PlayerComponent, canActivate: [AuthGuard] }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

// ============================================================================
// /src/app/component/admin/admin.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminWorldComponent } from './world/admin-world.component';
import { AdminModuleComponent } from './module/admin-module.component';
import { AdminRegionComponent } from './region/admin-region.component';

export const router: Routes = [
    {
        path: 'admin', component: AdminComponent,
        children: [
            { path: 'world', component: AdminWorldComponent, outlet: 'admin-app' }
            , { path: 'module', component: AdminModuleComponent, outlet: 'admin-app' }
            , { path: 'region', component: AdminRegionComponent, outlet: 'admin-app' }
        ]
    }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

编辑3：尝试将RouterModule.forRoot更改为RouterModule.forChild，遗憾的是，同样的错误： - /

编辑4 ：转换路由以使用2个路由模块。希望这可能会有所作为，但同样的错误。

新路由器......

// ============================================================================
// /src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { GameComponent } from './component/game/game.component';
import { HomeComponent } from './component/home/home.component';
import { LoginComponent } from './component/login/login.component';
import { PlayerComponent } from './component/player/player.component';
import { AuthGuard } from './service/auth/auth.service';
import { SignupComponent } from './component/signup/signup.component';
import { EmailComponent } from './component/email/email.component';
import { AdminComponent } from './component/admin/admin.component';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' }
    , { path: 'home', component: HomeComponent }
    , { path: 'game', component: GameComponent, canActivate: [AuthGuard] }
    , { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
    // , {
    //     path: 'admin', component: AdminComponent, canActivate: [AuthGuard],
    //     children: [
    //         { path: 'world', component: AdminWorldComponent, outlet: 'admin-app' },
    //         { path: 'module', component: AdminModuleComponent, outlet: 'admin-app' },
    //         { path: 'region', component: AdminRegionComponent, outlet: 'admin-app' }
    //     ]
    // },
    , { path: 'login', component: LoginComponent }
    , { path: 'signup', component: SignupComponent }
    , { path: 'login-email', component: EmailComponent }
    , { path: 'players', component: PlayerComponent, canActivate: [AuthGuard] }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

// ============================================================================
// /src/app/admin/admin-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminWorldComponent } from './world/admin-world.component';
import { AdminModuleComponent } from './module/admin-module.component';
import { AdminRegionComponent } from './region/admin-region.component';

export const adminRoutes: Routes = [
    {
        path: 'admin', component: AdminComponent,
        children: [
            { path: 'world', component: AdminWorldComponent, outlet: 'admin-app' }
            , { path: 'module', component: AdminModuleComponent, outlet: 'admin-app' }
            , { path: 'region', component: AdminRegionComponent, outlet: 'admin-app' }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(adminRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AdminRoutingModule { }

编辑5：它正在运作！

删除了路由模块，根据Tyler的建议返回到导出路由配置。他是对的，路由模块不工作。泰勒和我一起工作很多，所以我接受了他的回答。谢谢泰勒的帮助！

以下是如何使用自己的路由器插座设置父应用，然后在父母点击链接以使用自己的新路由器插件加载子应用。子应用程序加载/替换父应用程序路由器插座。

父app模块或路由中没有什么特别之处。他们就是我在这篇文章之前的方式。

需要注意的重点，至少在我的情况下，不在子路由器插座中使用name="" attrib。这将导致“错误：无法匹配任何路线......”。不要使用像我上面尝试过的路由模块，这也会导致“错误：无法匹配任何路由......”。不要在路由中使用outlet: 'blah'，这也会导致“错误：无法匹配任何路由......”。确保完全按照下面的admin.routes.ts中的设置设置子路由配置children: []。另请注意子路径中的RouterModule.forChild(router)。这些事情为我今天解决了这个问题。

家长APP

// ============================================================================
// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from '../environments/firebase.config';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// import { AppRoutingModule } from './app-routing.module';
import { routes } from './app.routes';

// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './component/home/home.component';
import { GameComponent } from './component/game/game.component';
import { PlayerComponent } from './component/player/player.component';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { EmailComponent } from './component/email/email.component';

// Admin Module
import { AdminModule } from './component/admin/admin.module';

// Services
import { AuthGuard } from './service/auth/auth.service';
import { AuthPlayerService } from './service/auth/auth-player.service';
import { MdbService } from './service/mongo/mdb.service';
import { PlayerMdbService } from './service/mongo/player-mdb.service';

@NgModule({
    declarations: [
        AppComponent
        , HomeComponent
        , GameComponent
        , PlayerComponent
        , LoginComponent
        , SignupComponent
        , EmailComponent
    ],
    imports: [
        BrowserModule
        , FormsModule
        , HttpModule
        , AdminModule
        , AngularFireModule.initializeApp(firebaseConfig)
        , NgbModule.forRoot()
        // , AppRoutingModule
        , routes
    ],
    providers: [
        AuthGuard
        , AuthPlayerService
        , MdbService
        , PlayerMdbService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

// ============================================================================
// /src/app/app.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { GameComponent } from './component/game/game.component';
import { HomeComponent } from './component/home/home.component';
import { LoginComponent } from './component/login/login.component';
import { PlayerComponent } from './component/player/player.component';
import { AuthGuard } from './service/auth/auth.service';
import { SignupComponent } from './component/signup/signup.component';
import { EmailComponent } from './component/email/email.component';
import { AdminComponent } from './component/admin/admin.component';

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'game', component: GameComponent, canActivate: [AuthGuard] },
    { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'login-email', component: EmailComponent },
    { path: 'players', component: PlayerComponent, canActivate: [AuthGuard] }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

CHILD APP

// ============================================================================
// /src/app/admin/admin.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { routes } from './admin.routes';
// import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { AdminRecsComponent } from './admin-recs.component';
import { AdminFormComponent } from './admin-form.component';
import { AdminNavComponent } from './admin-nav.component';

import { AdminWorldComponent } from './world/admin-world.component';
import { AdminModuleComponent } from './module/admin-module.component';
import { AdminRegionComponent } from './region/admin-region.component';

@NgModule({
    imports: [
        CommonModule
        , FormsModule
        // , AdminRoutingModule
        , routes
    ]
    , declarations: [
        AdminComponent
        , AdminNavComponent
        , AdminRecsComponent
        , AdminFormComponent
        , AdminWorldComponent
        , AdminModuleComponent
        , AdminRegionComponent
    ]
    , schemas: [CUSTOM_ELEMENTS_SCHEMA]
    , exports: [
        AdminRecsComponent
        , AdminFormComponent
        , AdminNavComponent
        // , AdminWorldComponent
        // , AdminModuleComponent
        // , AdminRegionComponent
    ]
    // , bootstrap: [AdminComponent]
})
export class AdminModule { }


// ============================================================================
// /scr/app/admin/admin.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminWorldComponent } from './world/admin-world.component';
import { AdminModuleComponent } from './module/admin-module.component';
import { AdminRegionComponent } from './region/admin-region.component';

export const router: Routes = [
    {
        path: 'admin', component: AdminComponent,
        children: [
            { path: 'world', component: AdminWorldComponent },
            { path: 'module', component: AdminModuleComponent },
            { path: 'region', component: AdminRegionComponent },
        ]
    }
];

export const routes: ModuleWithProviders = RouterModule.forChild(router);

Answer 1

不确定您在哪里听说Angular2不允许超过1 router-outlet。我在一个大型应用程序中使用了几个。

您的主app.component将有一个router-outlet来处理根路由。如果您的某个路由延迟加载管理模块，该管理模块将拥有包含侧边菜单栏的根组件和所有子路由的router-outlet。

示例：

// app.routes

export const ROUTES: Routes = [
    // Main redirect
    { path: '', component: MainViewComponent },

    {
        path: 'admin',
        loadChildren: './admin/admin.module#AdminModule'
    }
]

您的MainViewComponent可以包含顶部导航栏和router-outlet。

然后管理员路由器配置可能如下所示：

export const routes: Routes = [
    {
        path: '',
        component: AdminComponent,
        children: [
            { path: '', component: Component1},
            { path: 'component2', component: Component2}

        ]
    }
];

管理模块中的根组件可能包含侧栏菜单和router-outlet以显示子组件。

您也可以命名为router-outlets。一个例子是并排两个router-outlet：

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

您的路由器配置如下所示：

{
  path: 'compose',
  component: ComposeMessageComponent,
  outlet: 'popup'
},

你会像这样使用它：

<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

或者用以下内容清除内容：

this.router.navigate([{ outlets: { popup: null }}]);

有关详细信息，请参阅docs或此article。

希望有所帮助。

修改

对于延迟加载的子项使用路由配置时，请确保在模块中正确加载路由配置。根路由配置将加载到带有RouterModule.forRoot(routes)的根AppModule中，子路由在RouterModule.forChild(routes)的子模块中。

您的路线配置和模块需要看起来像这样（不要创建一个单独的模块来保存路由配置）：

// Admin Routes

export const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, children: [ { path: 'world', component: AdminWorldComponent, outlet: 'admin-app' } , { path: 'module', component: AdminModuleComponent, outlet: 'admin-app' } , { path: 'region', component: AdminRegionComponent, outlet: 'admin-app' } ] } ];

//管理模块：

import { adminRoutes } from './admin.routes'; @NgModule({ imports: [ ... RouterModule.forChild(adminRoutes), ] ...

// App Routes（延迟加载管理模块）

export const appRoutes: Routes = [ { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, ....

// App Module

import { appRoutes } from './app.routes'; @NgModule({ imports: [ ... RouterModule.forRoot(appRoutes), ] ...

希望有所帮助。

Answer 2

是的，有办法做到这一点。您需要为路由器插座命名，如：

<router-outlet name="child1"></router-outlet>

<router-outlet name="child2"></router-outlet>

在路由器内部，您需要定义路由器应该路由使用的路径：

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

原帖： Angular2 multiple router-outlet in the same template

Angular 2子应用程序，父/子，嵌套组件，嵌套路由器插座，设计/编码

2 个答案: