我们如何在Angular Nativecript应用程序中使用多个路由器插座

Question

我正在从事Nativecript Angular应用程序和Currenlty上，我需要在应用程序中使用多个出口。

我想将不同的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]
})

我使用此代码获得空白屏幕。如果有人知道，请让我知道我们如何处理。

Answer 1

实际上，您不需要使用路由器输出，但这非常棘手...我将其作为参考

Answer 2

在Angular Nativecript中使用此代码。

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>