Angular2 - 多个模块的共享布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular2 - 多个模块的共享布局相关的知识,希望对你有一定的参考价值。

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

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

enter image description here

每个模块(Auth和Features)都有自己的RoutingModule和不同的组件集。对AuthaService / AuthGuards的访问受Layout2和FeatureModules的访问。

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

我该怎么做才能在模块之间共享布局,换句话说“在布局组件中加载模块”?

我目前的代码片段是:

app.component

<router-outlet></router-outlet>

用户area.component

<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]
    }
];

如上所述,我试图使用上述链接中的概念,但它没有按预期工作。

答案

您可以使用父/子路由来实现此目的。这样的东西应该工作(可能需要一些调整取决于你的项目的其他部分)

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>放在两个布局组件中。

以上是关于Angular2 - 多个模块的共享布局的主要内容,如果未能解决你的问题,请参考以下文章

在 Android 中使用具有多个布局的单个片段

具有相同布局的多个片段

从浏览器共享网址到导航片段

Angular2:多个模块中的一个模块实例

如何在多个 Angular 2 项目之间共享一个 Angular 2 组件?

垂直线性布局中的多个片段