Question

我正在使用angular 8进行购物Web应用程序项目。

管理员有一个商店网址和cms（内容管理系统）。

我希望在导航到“ localhost：4200 / cms”时加载CMS模块。

这可以实现吗？以下是我的代码。

//******* app.component.html *********/
<app-header></app-header>
<main role="main">
  <router-outlet (message)="handleMessage($event)"></router-outlet>
</main>
<footer class="text-muted">
  <app-footer></app-footer>
</footer>


//******* app-routing.module.ts *********/

const routes: Routes = [
  {path: '',                        component:MainComponent, pathMatch:'full'},
  {path: 'cart',                    component: CartComponent},
  {path: 'shop/:product_category',  component:ProductCategoryComponent},
  {path: 'cms', loadChildren: ()=> import ('./cms/cms.module').then(mod=>mod.CmsModule)},
  {path: '**',                      component:NotFoundComponent}
];

//******* cms-routing.module.ts *********/
const routes: Routes = [
  {path: '', component:CmsComponent, children:[
    {path: '', redirectTo: 'cms'},
    {path: 'product-categories', component:ProductCategoriesComponent},
    {path: 'product-categories/create', component: CreateProductCategoryComponent},
    {path: 'product-categories/edit/:id', component: EditProductCateogryComponent},
    {path: 'products', component: ProductsComponent},
    {path: 'products/create', component: CreateProductComponent},
    {path: 'orders', component: OrdersComponent},
  ]},
];

Answer 1

我认为您无法做到这一点，因为Angular需要应用根目录，因此它知道在哪里呈现内容。

不确定命名路由器的插座是否符合您的需求。

Answer 2

据我了解，在角度结构中，组件是角度应用程序的基本构建块，因此在角度应用程序中始终存在一个或多个组件。

这意味着我们至少需要一个角度组件才能渲染角度应用。并且app.component是根组件，因此我们必须使用app.component（app-root）来呈现任何角度应用程序。

如果您的cms是与angular不同的应用程序，则可以使用angular RedirectGuard进行管理：refere

Angular-如何在没有根组件的情况下加载组件？

2 个答案: