角度为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应用程序中使用子路径来分隔安全页面和不安全页面.

在我的app根目录中,我有两个目录

/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