Question

我正在使用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]
})

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

Answer 1

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

Answer 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>

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

2 个答案: