不同頁面的多角度佈局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

使用兒童路線的一個常見的例子我喜歡用孩子的路線在我的角度2個應用程序的安全頁面和不安全頁面分開。

在我的應用程序的根，我有兩個目錄

/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

注意路由器插座。這是您的內容將被顯示的地方。這是我的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> 

Answer 3

你可以有多個路由器插座和重定向到你想要的地方。例如，如果用戶未登錄，登錄頁面可以是登錄頁面，如果使用登錄，則將用戶重定向到擁有頁眉和頁腳的母版頁，並且所有其他頁面可以是該組件的子項。比如我們有這樣

<my-app></my-app> 

我組分

應用程序，你有一個

<router-outlet></router-outlet> ¨ 你有一個登錄組件，你可以使用路由該頁面像這樣

{ path: '', component: LoginComponent} 

如前所述，這可以是登錄頁面，您不想顯示任何其他登錄信息。一旦用戶登錄您重定向用戶到主組件和主組件將具有路由這樣

{路徑：「母版」，成分：MasterComponent}

和主部件將具有路由器的出口以及

<router-outlet></router-outlet>

現在，當你想顯示用戶的其他頁面像我們。那麼你將用戶重定向到關於我們頁面這樣

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

這種方式，您將有一個像頭的細節和頁腳每一個地方的使用導航。 我希望這有助於！

Answer 4

您可以使用子路線解決您的問題。

看到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