角度为2

Question

我正在构建一个angular2应用程序。

我有一个登录页面 - 只有2个输入（没有页眉没有页脚没有侧栏）

当用户登录时，他应该导航到包含页眉，页脚和右侧导航栏的页面。

内页中唯一改变的是右侧内容。

我有app.component

import { Component } from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'pm-app',
    template: `
    <div>
        <router-outlet></router-outlet>
     </div>
     `,
     styleUrls:["app/app.component.css"],
      encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

我理解这个app.component就像母版页，您可以在其中添加页眉和页脚，<router-outlet></router-outlet>是内容根据路由更改的位置。

我的简单问题是如何为登录页面制作一个布局，将页眉，页脚和右栏的另一个布局设置为内页？

Answer 1

您可以使用子路径为不同的视图使用不同的布局。

以下是在Angular2中使用子路由的常见示例

我喜欢在我的angular 2应用程序中使用子路径来分隔安全页面和不安全页面。

在我的应用根目录中，我有两个目录

/Public

＆安培;

 /Secure

现在在根目录中我也有

/app.routing.ts

从那里我创建了一个布局文件夹，

/layouts

在该目录中我创建

/layouts/secure.component.ts
/layouts/secure.component.html

＆安培;

/layouts/public.component.ts
/layouts/public.component.html

从这一点来说，我可以将我的路线转移到两种布局中的一种，这取决于页面是安全的还是公开的。我这样做是通过在我的根routes.ts文件中创建到每个布局的路径。

/app.routes.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

请注意，我为每个布局注册了子路线。这是每个单独路径文件的导出值。一个在公共目录中，一个在安全目录中。

/public/public.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'p404', component: p404Component },
    { path: 'e500', component: e500Component },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'home', component: HomeComponent },
    { path: 'benefits', component: BenefitsComponent },
    { path: 'services', component: ServicesComponent },
    { path: 'education', component: EducationComponent },
    { path: 'products', component: ProductsComponent },
    { path: 'fcra', component: FcraComponent },
    { path: 'croa', component: CroaComponent },
    { path: 'building', component: BuildingComponent },
    { path: 'tips', component: TipsComponent },
    { path: 'maintenance', component: MaintenanceComponent }
];

现在可以访问所有这些路线作为我公共布局的子路线。这现在引导我们保护我们的安全观点。

所以在安全目录中我基本上做同样的事情，

/secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'reports', component: ReportsComponent },
    { path: 'recommendations', component: RecommendationsComponent },
    { path: 'score-simulator', component: ScoreSimulatorComponent },
    { path: 'payment-method', component: PaymentMethodComponent },
    { path: 'lock-account', component: LockAccountComponent }
];

这允许我现在使用auth来保护这些子路线。如果你记得在

/app.routes.ts我们为安全路线做了这个，

{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }

注意[Guard]。这允许我们保护所有子路由以进行安全布局。这是我使用子路线的一个原因。我可以给你更多，但我觉得这是最合理的解释。

只是为了让事情向前迈进一步，并为您提供这方面的信息，这就是我[Guard]安全页面的方式。创建服务和implementing CanActivate

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem('access_token')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate(['/home']);
        return false;
    }
}

这允许您使用<router-outlet></router-outlet>提供公共布局，然后在布局中使用不同的页眉和页脚。然后再次在安全布局中使用<router-outlet></router-outlet>，显然是一个不同的页眉和页脚。 如果我遗漏了任何不清楚的地方，请告诉我，我会更新答案。

Answer 2

您可以使用子路线解决问题。

在https://angular-multi-layout-example.stackblitz.io/查看工作演示或在https://stackblitz.com/edit/angular-multi-layout-example

进行编辑

设置您的路线如下

const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    // App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

推荐参考：http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

Answer 3

您可以根据需要设置多个路由器插座和重定向。例如，如果用户未登录，则登录页面可以是登录页面，如果登录使用，则将用户重定向到具有页眉和页脚的母版页，并且所有其他页面可以是该组件的子页面。例如，我们有这样的应用程序

<my-app></my-app>

在我的组件中你有一个

<router-outlet></router-outlet> ¨ 你有一个登录组件，你可以像这样使用该页面的路由

 { path: '', component: LoginComponent}

如前所述，这可以是登陆页面，您不想显示任何其他内容然后登录详细信息。用户登录后，您将用户重定向到主组件，主组件将具有此类路由

{path：'masterpage'，component：MasterComponent}

并且主组件也将具有路由器插座

<router-outlet></router-outlet>

现在当你想向用户显示关于我们的其他网页时。然后你会将用户重定向到我们这样的页面

{ canActivate: [AuthGuard], component: MasterComponent , path: 'masterpage',
  children:[
           {   canActivate: [AuthGuard],
               component: AboutUsComponent ,
               path: 'aboutus'
           }]
}

通过这种方式，您可以在每个使用导航的位置获得页眉和页脚等详细信息。 我希望这有帮助！

Answer 4

注意路由器插座。这是您显示内容的地方。这是我app.component.html的一个例子。在这种情况下，重定向到home.component并显示在路由器插座中。

<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
        <div class="ui-g-12" *ngIf="!isLoggedIn">
            <div class="ui-g">
                <div class="ui-xl-2">
                    <img class="logo" src="./app/resources/KetoLightLogo.png">
                </div>
                <div class="ui-xl-7">
                </div>
                <div class="ui-xl-3 ui-g-nopad" style="width: 320px; margin-left: 80px; float: right; ">
                    <div>
                        <p-menubar class="pMenuBar" [model]="items"></p-menubar>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-g-12" *ngIf="isLoggedIn">
            <div class="ui-g">
                <div class="ui-xl-2">
                    <img class="logo" src="assets/KetoLightLogo.png">
                </div>
                <div class="ui-xl-4">
                    <label class="ui-widget loggedInLabel">Logged in as: jbaird@arsbirder.com</label>
                </div>
                <div class="ui-xl-6 ui-g-nopad" style="width: 525px;  margin-left: 270px; float: right; ">
                    <p-menubar [model]="items"></p-menubar>
                </div>
            </div>
        </div>
    </div>
</div>

<router-outlet></router-outlet>

<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
        <div class="ui-g-12">
            <div class="ui-g">
                <div class="ui-g-12 ui-md-12 ui-lg-12">
                    <div class="ui-g-row">
                        <div class="ui-g-12">
                            <div class="ui-g-12 ui-md-12 ui-lg-12">
                                <div class="ui-g-1 ui-md-4 ui-lg-5">
                                </div>
                                <div class="ui-g-10 ui-md-4 ui-lg-2">
                                    <p class="copyright">Copyright 2016 Xamlware, Inc.</p>
                                    <p class="copyright2">All rights reserved</p>
                                </div>
                                <div class="ui-g-1 ui-md-4 ui-lg-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>