Angular2: Использование маршрутов, как отобразить навигационную панель после успешного входа в систему?

Ответ 1

Недавно я сделал нечто подобное, и вот как я это сделал. Во-первых, вам нужно создать NavBarComponent в корне вашего приложения. И в NavBarComponent вы ссылаетесь (то, что я называю) на GlobalEventsManager, который является сервисом, который вы вводите там, где вам это нужно.

Вот посмотрите на GlobalEventsManager:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

@Injectable()
export class GlobalEventsManager {

    private _showNavBar: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable();

    constructor() {}

    showNavBar(ifShow: boolean) {
        this._showNavBar.next(ifShow);
    }


}

Ответ 2

На самом деле существует совершенно другой подход, который не использует ни один из излучателей/слушателей событий. Я ничего не имею против событий, и я использую оба подхода (ниже один и @brando один) в соответствии с конкретными потребностями проекта/сложностью.

Метод: у нас есть 2 прикладных модуля (области): public (у которых нет navbar) и защищен (тот, который имеет один).

Открытый модуль содержит все общедоступные маршруты:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegistrationComponent } from './registration/registration.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'login', component: LoginComponent },
      { path: 'registration', component: RegistrationComponent },
      { path: 'reset-password', component: ResetPasswordComponent }
    ])
  ],
  declarations: [
    LoginComponent,
    RegistrationComponent,
    ResetPasswordComponent
  ]
})
export class PublicModule { }

Это то, что у вас уже было, нет ничего необычного здесь.

Тогда у нас есть защищенная область

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NavbarWrapperComponent } from './navbar-wrapper/navbar-wrapper.component';
import { UserProfileComponent } from './user-profile/user-profile.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', redirectTo: '/login', pathMatch: 'full' }, // point 1
      {
        path: '', // point 2
        component: NavbarWrapperComponent, // point 3
        children: [
          { path: 'profile', component: UserProfileComponent }
        ]
      }
    ])
  ],
  declarations: [
    NavbarWrapperComponent,
    UserProfileComponent
  ]
})
export class ProtectedModule { }

и здесь начинается магия.

Прежде всего, обратите внимание на точку 1:

{ path: '', redirectTo: '/login', pathMatch: 'full' },

Нам нужен этот прямо здесь. Если мы поместим его в AppModule, он будет проигнорирован. Здесь нет ничего важного, возможно, было бы еще более логично иметь эту переадресацию в защищенном модуле.

Точка 2 позволяет проксировать все маршруты детей в NavbarWrapperComponent (пункт 3), которая заботится о рендеринге всех наших детей. Вот шаблон компонента navbar:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <!-- nav content here -->
</nav>

<router-outlet></router-outlet>

Этот <router-outlet> будет обрабатывать все маршруты для детей.

Возможные проблемы, с которыми вы можете столкнуться, и их решение:

• вам может потребоваться перенаправить на AppModule - просто измените путь в точке 2 на какое-то настоящее имя, например. protected. Это будет префикс для всех ваших защищенных URL-адресов с этим значением, которое вам может не понадобиться. У вас есть 2 варианта выбора.
• вы можете иметь не только один модуль внутри защищенной области - просто используйте ленивую маршрутизацию
• вы можете скрыть/показать навигацию, параметры передачи и т.д. - просто объединить ее с решением событий.

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

Ответ 3

лучший современный способ в angular4, с новым маршрутизатором, с детскими маршрутами, просто нужно использовать UrlSerializer-класс для удаления скобок, https://angular.io/docs/ts/latest/api/router/index/UrlSerializer-class.html, кто-нибудь его использовал?

export const ROUTES: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path : '',
    children: [
        {
          path: '', component: DefaultLayoutComponent,
          children: [
            { path: '', component: HomeComponent, canActivate: [AuthGuard] },
            { path: 'users', component: UsersListComponent, canActivate: [AuthGuard] },
            { path: 'users-add', component: UsersAddComponent, canActivate: [AuthGuard] },
            { path: 'users-view/:id', component: UsersViewComponent, canActivate: [AuthGuard] },
            { path: 'users-edit/:id', component: UsersEditComponent, canActivate: [AuthGuard] },
            ]
        }
    ]
  },
  // otherwise redirect to home
  { path: '**', redirectTo: '' }
]