我有一个登录页面 – 只有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>是基于路由的内容的变化.
这是在Angular2中使用子路由的常见示例
我喜欢使用子路由在我的角度2应用程序中分离安全页面和不安全的页面.
在我的应用程序根目录中有两个目录
/Public
&安培;
/Secure
现在在根目录我也有
/app.routing.ts
从那里我创建一个布局文件夹,
/layouts
在我创建的目录中
/layouts/secure.component.ts /layouts/secure.component.html
&安培;
/layouts/public.component.ts /layouts/public.component.html
从这一点上我可以将我的路线转移到两个布局中的一个,这取决于页面是要安全还是公开.我通过创建一个路由到我的根路由文件中的每个布局.
/app.routes.ts
const APP_ROUTES: Routes = [
{ path: '',redirectTo: '/home',pathMatch: 'full',},{ path: '',component: PublicComponent,data: { title: 'Public Views' },children: PUBLIC_ROUTES },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',{ 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: '',children: SECURE_ROUTES }
注意[守卫].这样我们就可以保护所有的子路由以实现安全布局.这是我使用儿童路线的一个原因.我可以给你很多,但我觉得这是最合理的解释.
只是为了让事情进一步进一步,把它放在你的角度来说,这是我如何[保护]安全页面.创建一个服务并实现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>在安全布局中再次显而易见的是一个不同的页眉和页脚.让我知道,如果我没有任何不明确的内容,我会更新答案.
