多个布局为不同页面的角度2

我正在建立一个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>是基于路由的内容的变化.

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

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

这是在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>在安全布局中再次显而易见的是一个不同的页眉和页脚.让我知道,如果我没有任何不明确的内容,我会更新答案.

多个布局为不同页面的角度2

猜你在找的Angularjs相关文章