angular - 只有在 app-routing.module.ts 中路由时，组件才使用主布局

Question

如果我使用 another-routing.module.ts 路由我的组件，那么它不会使用 mainlayout。

MainComponent 对我来说就像 app.component.ts ，从下面的链接中得到了这个想法。因为我想绕过登录页面的 MainLayout。 如何在 Angular 2 中为登录组件使用单独的布局？

App-routing.module.ts
const routes: Routes = [
  {path: "", component: MainComponent,
    children: [
      { path: "", component: DashboardComponent },
      { path: "help", component: HelpComponent }
    ]
  }
];

another-routing.module.ts
const routes: Routes = [
  {path: 'users' , children : [
    {path: 'add', component: UsersComponent},    
    ]}
];

标签： angular

Answer 1

布局组件应该有一个 router-outlet 标签，并且你的模块应该加载到布局组件中。

const routes: Routes = [{
  path: '',
  component: LayoutComponent,
  children: [
    {
      path: 'companies',
      loadChildren: () =>
        import('./pages/companies/companies.module').then(m => m.CompaniesModule)
    },
    {
      path: '**',
      redirectTo: 'companies'
    }
  ]
}];

这样，布局组件的所有子级都将继承布局组件。