我们如何在 Angular+Nativescript 应用程序中使用多个路由器插座？答案

【问题标题】：How can we use multiple router outlets in Angular+Nativescript application?我们如何在 Angular+Nativescript 应用程序中使用多个路由器插座？
【发布时间】：2019-06-26 08:10:24
【问题描述】：

我正在开发 Nativescript+Angular 应用程序，目前我的应用程序需要多个插座。

我想为不同的组件使用不同的 2 个插座。

这是我的示例代码：

app.component.html

<page-router-outlet name="login"></page-router-outlet>
<page-router-outlet name="register"></page-router-outlet>

app-routing.module.ts

const routes: Routes = [
  { path: "", component: LoginComponent, outlet: 'login' },
  { path: "register", component: RegisterComponent, outlet: 'register' }
];


@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})

我收到此代码的空白屏幕。如果有人知道，请告诉我我们该如何处理。

【问题讨论】：

尝试在 app.component.html 添加<router-outlet></router-outlet>
您不能在根级别拥有多个路由器插座。根级别应该只有一个元素，如果您喜欢多个插座，则需要一个布局或至少一个可以容纳它们的 TabView。
谢谢@Manoj，我明白了。

标签： angular navigation nativescript nativescript-angular router-outlet

【解决方案1】：

实际上，您不需要使用路由器插座，但这样做非常棘手......我将其用作参考repo

【讨论】：

【解决方案2】：

将此代码用于 Angular+Nativescript 中的多个路由器出口。

app-routing.module.ts:-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "login",
    pathMatch: "full"
},
{
    path: "login",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/login/login.module#LoginModule",
    outlet: "login"
},
{
    path: "register",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/register/register.module#RegisterModule",
    outlet: "register"
}
];

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

app.component.html:-

<page-router-outlet name="login">
</page-router-outlet>

<page-router-outlet name="register">
</page-router-outlet>

【讨论】：