Question

我想使用Angular IO在一个应用中为前端和管理员创建单独的URL。

例如：

Front URL: http://localhost:4200/

Administrator URL: http://localhost:4200/admin

请建议我解决。

Answer 1

你试过这个吗？

假设您有前面和管理员URL的单独组件。

    const appRoutes: Routes = [

      { path: '', component: DefaultComponent },

      { path: 'admin',component: AdminComponent }

    ];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )

  ],
})
export class AppModule { }

以上，

对于Front URL：http://localhost:4200/，将调用DefaultComponent

管理员网址：http://localhost:4200/admin，将调用AdminComponent

重要！不要忘记在.html文件中提及组件选择器<my-app></my-app>

Answer 2

在app.module.ts中导入RouterModule，如下所示：

const routes: Routes = [
  { 
    path: '', 
    loadChildren: './front/front.module#FrontModule'
  },
  { 
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  }
];

@NgModule({
  declarations: [ ... ],
  imports: [
    RouterModule.forRoot(routes),
    ...
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在你的管理模块和前端模块中，你还必须像这样导入RouterModule：

const routes: Routes = [
  { path: '', component: AdminComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    ...
  ]
})
export class AdminModule { }

并将router-outlet添加到您的app.component.html：

<router-outlet></router-outlet>

使用Angular IO为正面和管理员分隔URL

2 个答案: