Angular 2中不同页面的多种布局 [英] Multiple layouts for different pages in Angular 2
问题描述
我有一个登录页面-仅有2个输入(没有标题，没有页脚，没有侧边栏)
I have a login page - just 2 input (no header, no footer, no sidebar)
用户登录后，应将其导航至包含页眉，页脚和右侧导航栏的页面.
When a user signs in he should be navigated to a page with header, footer and right navbar.
内页上唯一更改的是右侧内容.
the only thing that changes on the inner page is the right side content.
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> 是内容根据路由更改的地方.
I understand this app.component is like master page where you can add the header and footer and the <router-outlet></router-outlet> is where the content changes based on the routing.
如何为登录页面制作一个布局，为内部页面制作一个带有页眉，页脚和右侧栏的布局?
How do I make one layout for the login page and another layout with header, footer and right sidebar for the inside page?
推荐答案
您可以使用子路径为不同的视图使用不同的布局.
You could use child routes to use different layouts for different views.
这是在Angular2中使用子路由的常见示例
Here is a common example of using child routes in Angular2
我喜欢在我的angular 2应用程序中使用子路由来分隔安全页面和不安全页面.
I like to use child routes to separate secure pages and unsecure pages in my angular 2 applications.
在我的应用程序根目录中，我有两个目录
In my app root I have two directories
/Public
&
/Secure
现在在根目录中，我也有
Now in the root directory I also have
/app.routing.ts
从那里我创建一个布局文件夹，
from there I create a layouts folder,
/layouts
在该目录中创建
/layouts/secure.component.ts
/layouts/secure.component.html
&
/layouts/public.component.ts
/layouts/public.component.html
从这一点上来说，我可以将路由转移到两种布局之一，具体取决于该页面是安全页面还是公共页面.我是通过在根route.ts文件中为每个布局创建一个路由来实现的.
from this point I can divert my routes to one of the two layouts depending if the page is meant to be secure or public. I do this by creating a route to each layout in my root routes.ts file.
/app.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 }
];
请注意，我为每个布局注册了我的子路线.那是每个单独的路由文件的导出值.一种在公共目录中，另一种在安全目录中.
Notice that I register my child routes for each layout. That is the exported value of each separate route file. One is in the public directory and one is in the secure directory.
/public/public.routes.ts
/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 }
];
所有这些路线现在都可以作为我的公共布局的子路线访问.现在，这导致我们保护我们的安全视图.
All of these routes are now accessible as the child routes for my public layout. Which now leads us to protecting our secure views.
因此，在安全目录中，我基本上会做同样的事情，
So in the secure directory I essentially do the same thing,
/secure/secure.routes.ts
/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 保护这些子路由.如果你还记得
This allows me to use auth to protect those child routes now. If you remember in
/app.routes.ts是为安全路由执行的，
/app.routes.ts we did this for the secure routes,
{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
注意 [Guard] .这使我们能够为安全布局保护所有子路径.这是我使用子路线的原因之一.我可以给您更多信息，但我认为这是最合理的解释.
Notice the [Guard]. This allows us to protect all of the child routes for the secure layout. This is one reason I use child routes. I could give you a lot more but I feel this is the most reasonable explanation.
只需再走一小步，并为您介绍一下这就是我 [Guard] 安全页面的方式.创建服务并实施CanActivate
Just to take things a small step further and put this in perspective for you this is how I [Guard] the secure pages. Creating a service and 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> ，并且显然使用不同的页眉和页脚.让我知道是否有任何不清楚的地方，我将更新答案.
This allows you to serve public layout with <router-outlet></router-outlet> then use a different header and footer in the layout. Then use <router-outlet></router-outlet> in the secure layout again and obviously a different header and footer.
Let me know if I have left anything unclear and I will update the answer.
这篇关于Angular 2中不同页面的多种布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
