Question

我正在使用this template，并希望使用ASP.NET区域分隔我的应用程序。假设有一个公共区域和管理区域的网站。现在我可以很好地显示家庭区域，但我不知道如何更改基本布局，例如显示管理区域（应该与公共区域完全不同）。

根据我的理解，我需要使用Angular 组件并为公共页面创建一个，为管理页面创建另一个并在app组件中将它们连接在一起但不确定它们如何工作一起，以便将/admin/**路由重定向到相应的组件。（它有自己的基本布局）任何代码示例都将受到赞赏。

Answer 1

我不确定该模板，但使用Angular，您可以设置嵌套路由并执行以下操作：

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

// app.routing.ts

const APP_ROUTES: Routes = [
  { path: "", component: PublicComponent,
          children: [
            { path: "", component: HomeComponent },
            { path: "login", component: LoginComponent },
            { path: "join", component: JoinComponent },
            { path: “login/forgot-your-password", component: ForgotPasswordComponent },
          ]
  },
  { path: "admin", component: AdminComponent, canActivate: [AdminGuard],
          children: [
            { path: “users", component: UsersListComponent },
            { path: “secret", component: SecretComponent, canActivate: [SecretGuard] },
            { path: “message", component: MessageComponent }
          ]
    }
];

// app.component.html

<router-outlet></router-outlet>

// public.component.html

<header>
      <app-header></app-header>
</header>

<main>
      <router-outlet></router-outlet>
</main>

<footer>
      <app-footer></app-footer>
</footer>

如果已经嵌套的路径也需要有孩子，你可以进一步嵌套。

如何使用Angular 2管理应用程序的不同部分

1 个答案: