Angular 2中不同页面的多个布局

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

当用户登录时，应将其导航到带有页眉、页脚和右导航栏的页面

内部页面上唯一更改的是右侧内容

从'@angular/core'导入{Component}；
从'@angular/core'导入{ViewEncapsulation}；
@组成部分({
选择器：“pm应用程序”，
模板：`
`,
样式URL:[“app/app.component.css”]，
封装：视图封装。无
})
导出类AppComponent{
pageTitle:string='Acme产品管理'；
}

我知道这个

app.component

就像母版页一样，你可以在母版页上添加页眉和页脚，

是根据路由更改内容的地方

---

如何为登录页面创建一个布局，为内部页面创建另一个带有页眉、页脚和右侧边栏的布局？

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

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

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

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

/Public

&

现在在根目录中，我还有

/app.routing.ts

从那里我创建了一个layouts文件夹

/layouts

在我创建的目录中

/layouts/secure.component.ts
/layouts/secure.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 }
];

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

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

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

/public/public.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 }
];

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

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

所有这些路线现在都可以作为“我的公共布局”的子路线访问。现在，这将引导我们保护我们的安全视图

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

/secure/secure.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 }
];

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

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]

安全页面。创建服务并

实现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;
    }
}

这允许您使用

为公共版面提供服务，然后在版面中使用不同的页眉和页脚。然后在安全布局中再次使用

，显然是不同的页眉和页脚。

---

如果有什么不清楚的地方，请告诉我，我会更新答案。

注意路由器出口。这就是您的内容将显示的位置。这是我的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>

以以下身份登录：jbaird@arsbirder.com
版权所有2016 Xamlware，Inc
保留所有权利

您可以有多个路由器出口并重定向到您想要的地方。例如，如果用户未登录，登录页可以是登录页；如果用户已登录使用，则将用户重定向到母版页，其中有页眉和页脚，并且所有其他页面都可以是该组件的子页面。例如，我们有这样的应用程序

<my-app></my-app>

 { path: '', component: LoginComponent}

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

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

<my-app></my-app>

 { path: '', component: LoginComponent}

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

{路径：'母版页'，组件：母版组件}

主组件也将有路由器出口

现在，当您想向用户显示其他类似于我们的页面时。然后你会像这样把用户重定向到关于我们的页面

<my-app></my-app>

 { path: '', component: LoginComponent}

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

通过这种方式，您将在每个使用导航的位置都有诸如页眉和页脚之类的详细信息。

---

我希望这有帮助

您可以使用子路由解决问题

请参阅工作演示或编辑

如下所示设置您的路线

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);

---

在实现类似于卡片布局的东西之前，它应该在相同的布局中。因此我相信代码中的诀窍是始终从根路径“”重定向到子路由。那么，如果我想在path:www.example.com下有一个完整的布局，但在path:www.example.com/login下有一个完全不同的布局，该怎么办？我很乐意帮助您。你能说得更具体些吗？你面临什么问题？好的，我正在做一个仪表板应用程序。我想在主页上有一个全幅面的布局，包括精美的表格和图表等。用户可以登录此页面：。登录页面应该只是一个简单的表单，根本没有全幅布局。你会怎么做？好的，coo