Подтвердить что ты не робот

Несколько макетов для разных страниц в angular 2

Я создаю приложение angular2.

У меня есть страница входа - всего 2 входа (без заголовка no footer no side bar)

при входе пользователя в систему он должен перейти к странице с нижним колонтитулом заголовка и правой навигационной панелью.

Единственное, что изменится на внутренней странице, это правое содержимое.

У меня есть 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> - это то, где контент изменяется на основе маршрутизации.

Мой простой вопрос: как сделать один макет для страницы входа и другого макета с заголовком, нижним колонтитулом и правой панелью на внутреннюю страницу?

4b9b3361

Ответ 1

Вы можете использовать дочерние маршруты для использования разных макетов для разных видов.

Вот пример использования дочерних маршрутов в Angular2

Мне нравится использовать дочерние маршруты для разделения защищенных страниц и незащищенных страниц в моих приложениях angular 2.

В моем корне приложения у меня есть два каталога

/Public

&

 /Secure

Теперь в корневом каталоге также есть

/app.routing.ts

оттуда создаю папку макетов,

/layouts

В этом каталоге я создаю

/layouts/secure.component.ts
/layouts/secure.component.html

&

/layouts/public.component.ts
/layouts/public.component.html

с этой точки я могу перенаправить мои маршруты на один из двух макетов, в зависимости от того, должна ли страница быть безопасной или общедоступной. Я делаю это, создавая маршрут для каждого макета в моем корневом файле route.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> в безопасном макете и, очевидно, другой верхний и нижний колонтитулы. Дайте мне знать, если я оставил все неясным, и я обновлю ответ.

Ответ 2

Вы можете решить свою проблему, используя дочерние маршруты.

См. рабочую демонстрацию в 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

Ответ 3

У вас может быть несколько маршрутизаторов и перенаправление туда, где вы хотите. Например, страница входа в систему может быть целевой страницей, если пользователь не вошел в систему, и если вы используете для входа в систему, вы перенаправляете пользователя на главную страницу, где у вас есть верхний и нижний колонтитулы, а все остальные страницы могут быть дочерними элементами этого компонента. Например, у нас есть наше приложение, подобное этому

<my-app></my-app>

в моем компоненте есть

<router-outlet></router-outlet> ¨ у вас есть один компонент входа, и вы можете использовать эту маршрутизацию для этой страницы, например,

 { path: '', component: LoginComponent}

как было сказано ранее, это может быть целевая страница, и вы не хотите показывать ничего, кроме деталей входа в систему. После входа пользователя в систему вы перенаправляете пользователя на главный компонент, а главный компонент будет иметь такую ​​маршрутизацию

{путь: 'masterpage', компонент: MasterComponent}

и главный компонент также будет иметь выход маршрутизатора

<router-outlet></router-outlet>

теперь, когда вы хотите показывать пользователю другие страницы, например, о нас. то вы будете перенаправлять пользователя на нашу страницу, подобную этой

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

и таким образом у вас будут детали, такие как верхний и нижний колонтитулы, где вы будете использовать навигацию. Надеюсь, это поможет!

Ответ 4

Обратите внимание на розетку маршрутизатора. Здесь будет отображаться контент. Это пример моего 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: [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>