wiele układów dla różnych stron w angular 2

Możesz rozwiązać swój problem za pomocą tras potomnych.

Zobacz demo robocze na https://angular-multi-layout-example.stackblitz.io / lub Edytuj w https://stackblitz.com/edit/angular-multi-layout-example

Ustaw trasę jak poniżej

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

Rekomendowany numer referencyjny: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

Możesz mieć wiele gniazd routera i przekierowania tam, gdzie chcesz. Na przykład strona logowania może być Stroną docelową, jeśli użytkownik nie jest zalogowany i jeśli use jest zalogowany, przekierowujesz użytkownika na stronę wzorcową, na której masz nagłówek i stopkę, a wszystkie inne strony mogą być potomkami tego komponentu. Na przykład mamy naszą aplikację w ten sposób

<my-app></my-app>

W moim-komponencie masz

<router-outlet></router-outlet> ¨ masz jeden komponent logowania i możesz użyć tego routingu dla tej strony w ten sposób

 { path: '', component: LoginComponent}

Jak powiedziano wcześniej może to być strona docelowa i nie chcesz pokazywać niczego innego, niż dane logowania. Po zalogowaniu użytkownik przekierowuje użytkownika do komponentu głównego i komponent główny będzie miał routing w ten sposób

{ path: 'masterpage', component: MasterComponent}

I główny komponent będzie miał również gniazdo routera

<router-outlet></router-outlet>

Teraz, gdy chcesz pokazać użytkownikowi inne strony, takie jak o nas. następnie przekierujesz użytkownika na stronę O nas w ten sposób

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

Oraz w ten sposób będziesz miał szczegóły, takie jak nagłówek i stopka w każdym miejscu, w którym używasz nawigacji. Mam nadzieję, że to pomoże!

Zwróć uwagę na gniazdo routera. Tam będą wyświetlane Twoje treści. To jest przykład mojej aplikacji.komponent.html. W tym przypadku przekierowanie jest do domu.komponent i jego wyświetlane w gniazdku routera.

<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: [email protected]</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>