如何决定什么时候给header,页脚改正路由在Angular 7？

Question

你能帮我解决以下情况吗:

我需要使用 app.routes 从登录转到仪表板，但仪表板使用其他标签，如 app-header，而登录不需要，例如 app.component.html 这就是我处理路由的方式：

<div class="wrapper">
    <app-header></app-header>
    <app-left-menu></app-left-menu>

    <router-outlet></router-outlet>

    <app-footer></app-footer>
    <app-right-menu></app-right-menu>
</div>

但登录只需要 <router-outlet> </ router-outlet> 而没有其他标签，我该如何进行交互，我想到了一个 ngIf，我将 div 放在包装器中，另一个放在包装器中<router-outlet > </ router-outlet>直接进行登录。这是个好主意吗？导航到另一个屏幕时如何更改 ngIf 的变量？有没有更具体的方法从登录到仪表板保护仪表板的所有路由重定向到登录？我将不胜感激。

Answer 1

正确的方法是使用功能模块，如果您有单独的功能，您可以为每个功能创建一个特定的模块。这给了你更多的灵活性，干净的代码和关注点的分离也获得了更好的性能，因为你可以延迟加载模块。在此处查看文档：https://angular.io/guide/feature-modules.

例如，当用户登录时，您可以定义一个模块作为应用程序的入口点，称为 InsideModule，此模块有您自己的路由，称为 InsideRoutingModule，它可能如下所示：

{
    path: 'home',
    component: InsideComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },

    ]
}

所以 InsideComponent 是 html 在这个模块中呈现的，在这里你可以使用通用标签交叉到应用程序：

<div class="wrapper">
    <app-header></app-header>
    <app-left-menu></app-left-menu>

    <router-outlet></router-outlet>

    <app-footer></app-footer>
    <app-right-menu></app-right-menu>
</div>

要访问此模块，请将它们导入 app.module 并修改 app.routing 如下：

const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'inside',
        loadChildren: () => InsideModule //this is lazy loading
    }
];

或者简单地通过路由器重定向到您在 InsideRoutingModule 中的路径。

app.module.html只有一个<router-outlet>标签

如何决定什么时候给header,页脚改正路由在Angular 7？

How to decide when to give the header, footer correct the route in Angular 7?

dashboard

login

angular-ui-router

angular

angular7