Angular2-多个模块的共享布局 [英] Angular2 - Shared Layout for multiple modules

问题描述

我用不同的模块构建一个Angular应用程序.每个模块处理不同的任务.在我的登录页面上，用户应登录或注册.这是一个非常精简的布局，没有任何导航.在我的功能模块(登录后即可访问)上，用户可以执行任务并搜索信息.

I build an Angular application with different modules. Each module handles distinct tasks. On my landing page, the user should login or register. It's a very lean layout without any navigation. On my feature modules (which are accessible after a login) the user can perform tasks and search for information.

我的主要问题是，我的功能模块应该共享相同的布局(带有导航，工具栏等)，而我的AuthModule不应具有相同的布局.下图应说明我试图实现的目标.

My main problem is, that my feature modules should share the same layout (with navigation, toolbar and so on) while my AuthModule should not have the same layout. The following image should illustrate what I try to achieve.

每个模块(身份验证和功能)都有自己的RoutingModule和不同的组件集.对Layout2和FeatureModules的访问受AuthService/AuthGuard保护.

Every module (Auth and Features) have their own RoutingModule and distinct set of components. The access to the Layout2 and the FeatureModules is protected by AuthService/AuthGuards.

我已经找到了基于组件的设置的好解决方案( https://stackoverflow.com/a/40508804/1365061和 https://stackblitz.com /edit/angular-multi-layout-example?file=app%2Fapp.routing.ts )，但不适用于基于模块的模块.我想延迟加载功能模块，但这不能应用于我发现的给定解决方案(至少不适用于模块).

I already found good solutions for a Component-based setup (https://stackoverflow.com/a/40508804/1365061 and https://stackblitz.com/edit/angular-multi-layout-example?file=app%2Fapp.routing.ts) but not for a module based one. I want to lazy load the feature modules and this can't be applied to the given solutions I found (at least it does not work for modules).

我该怎么做才能在模块之间共享布局，换句话说就是在布局组件中加载模块"?

What can I do to share the layouts between the modules or in other words "load the modules within the layout component"?

我当前的代码段是:

应用组件

<router-outlet></router-outlet>

用户区域组件

<mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="(auth.account$ | async) as account">
    <button mat-button class="pull-left" [disabled]="!account" (click)="sidenav.toggle()">
        <i class="fa fa-navicon" aria-hidden="true"></i> SiteName
    </button>

    <button mat-button class="pull-left ml-3 pull-left" routerLink="/settings/profile">
        <img [src]="account.userID | avatar" class="rounded-circle mr-1" width="30" height="30">
        <span class="d-none d-sm-inline"> {{account.name}}</span>
    </button>

    <button id="logoutButton" mat-button class="pull-right" routerLink="/auth/logout">
        <i class="fa fa-power-off" aria-hidden="true"></i><span class="d-none d-sm-inline"> Logout</span>
    </button>
</mat-toolbar>

<mat-sidenav-container (window:resize)="onResize($event)" [style]="mainStyle.getValue()">
    <mat-sidenav *ngIf="auth.account$ | async" [mode]="sidenavMode" [opened]="true" #sidenav class="sidenav-shadow">
        <app-nav-pane *ngFor="let nav of (app.navmods$ | async)" [content]="nav"></app-nav-pane>
    </mat-sidenav>
    <div class="container-fluid">
        <div class="row" style="flex: 1 0 auto;">
            <div class="col-12">

                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
    <app-footer *ngIf="responsiveService.mdOrLarger"></app-footer>
</mat-sidenav-container>

public.component

<div class="..." style="...">
   <router-outlet></router-outlet>
</div>

我的 app.routing.module路由:

const routes: Routes = [
    {
        path: 'auth',
        component: PublicAuthComponent,
        canActivate: [NotLoggedInGuard]
    },
    {
        path: '',
        component: UserAreaComponent,
        canActivate: [LoggedInGuard]
    }
];

如前所述，我尝试使用上述链接中的概念，但是它没有按预期工作.

As said I tried to use the concept from the above-mentioned links but it's not working as intended.

推荐答案

您可以使用父/子路由来实现此目的.这样的事情应该起作用(可能需要进行一些调整，具体取决于项目的其他部分)

You can use parent/children routing to achieve this. Something like this should work (may need some tweaking depends on the other parts of your project)

const routes: Routes = [
    {
        path: 'auth',
        component: Layout1
        canActivate: [NotLoggedInGuard],
        children: [
           { path: '', component: PublicAuthComponent }
        ]
    },
    {
        path: '',
        component: Layout2,
        canActivate: [LoggedInGuard],
        children: [
          { path: '', loadChildren: './path/to/module/feature.module#FeatureModule' }
        ]
    }
];

请记住将<router-outlet>放在两个Layout组件中.

Remember to put <router-outlet> inside both of Layout components.

这篇关于Angular2-多个模块的共享布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！