Angular 2 пример маршрутизации модуля функций

Что касается маршрутизации Angular 2, я в основном смог найти примеры сценария, в котором есть только один файл маршрутизации для всего приложения.

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

Изменить. Я понимаю, что несколько схожий вопрос уже задан и ответил. Есть две причины, почему я не считаю, что это особенно полезно:

1) Вопрос очень специфичен для этой ситуации пользователя, и поэтому существует много "шума". Все, что я прошу, это один единственный пример маршрутизации модуля функций.

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

ОТВЕТЫ

Ответ 1

Посмотрите, содержит ли этот пример то, что вы ищете.

Это используемые модули:

  • AppModule (корневой модуль)
  • UserModule (функциональный модуль)

Ниже приведены фрагменты ниже.

app.module.ts

import { UsersModule } from './users.module';
import { AppRouting } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    UsersModule,
    AppRouting,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: Home },
  { path: '**', component: NotFound }, //always last
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

users.module.ts

import { NgModule } from '@angular/core';
import { UsersRouting } from './users.routing';

@NgModule({
  imports: [
    CommonModule, // ngFor, ngIf directives
    UsersRouting,
  ],
  declarations: [...],
  providers: [...]
})
export class UsersModule { }

users.routing

const usersRoutes: Routes = [
  { path: 'users',
    children: [
      { path: '', component: Users },
      { path: ':id', component: User }
    ]
  }
];

export const UsersRouting = RouterModule.forChild(usersRoutes);

Plunker: http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

Пример кода включает также AboutModule (ленивый загруженный модуль, включает в себя пример разрешения), но не включает пример общего модуля.

Вы можете найти более подробную информацию на этих слайдах: https://slides.com/gerardsans/ngpoland-amazing-ng2-router

Ответ 2

Вот пример того, как я обрабатываю свою маршрутизацию с помощью дочерних маршрутов. Я думаю, это поможет вам и научит вас использовать дочерние маршруты для предоставления Guard для некоторых ваших компонентов. Это обеспечит некоторые представления, если у пользователя отсутствует аутентификация. Я разделяю шахту в public и secure маршрутизируя все через макет, затем загружая маршруты, для которых выбирается когда-либо макет.

Обязательно экспортируйте дочерние маршруты и укажите правильные маршруты в макете. Также убедитесь, что вы используете redirectTo в каждом файле дочерних маршрутов.

Мы определяем наши макеты общедоступными или безопасными. Затем предоставление файла маршрутов в каждом из этих каталогов, чтобы захватить один раз, когда выбран маршрут создания.

app.routing.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 }
];

Затем у меня есть папка макетов

Макеты

layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html

secure.component.ts, который выглядит так,

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';
import { Auth }                     from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './secure.component.html'
})
export class SecureComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

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

@Component({
    providers: [ Auth ],
    templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

    constructor( private router: Router, private auth: Auth, private http: Http  ) { }

    ngOnInit() { }
}

Теперь не забудьте создать дочерние маршруты в безопасном и общедоступном каталоге. Как только маршрут будет удален, дочерний маршрут загрузит правильный класс и файл шаблона будет отображаться.

Помните, что они будут детьми ваших макетов. Таким образом, вы можете поместить панель навигации и нижний колонтитул в secure.component.html, и она будет отображаться во всех ваших защищенных компонентах. Потому что мы используем селектор для загрузки содержимого. Все ваши защищенные и общедоступные компоненты будут загружены в селектор в файле макетов html.

дочерние маршруты /public/piublic.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 }
];

/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 }
];

Резюме

Мы установили файл начальной маршрутизации в корневой каталог нашего приложения Angular2. Этот файл маршрута направляет трафик на один из двух макетов в зависимости от того, аутентифицирован ли пользователь или нет. Если у них есть аутентификация для любого маршрута, который используется публичный макет или безопасный макет. Затем каждый из этих макетов имеет кучу дочерних маршрутов и компонентов, которые подаются на соответствующий макет.

Итак, чтобы очистить структуру файла,

root = /

Основные маршруты приложений, которые контролируют, какой макет просматривается.

/app.routing.ts

Макеты, которые содержат защищенные или общедоступные макеты.

Public

`/layouts/public.components.ts
/layouts/public.components.html
/layouts/public.routing.ts`

Secure

`/layouts/secure.components.ts
/layouts/secure.components.html
/layouts/secure.routing.ts`

общедоступный каталог, который содержит все, что открыто для просмотра без auth.

/public/home-component.ts
/public/home-component.html

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

/public/profile-component.ts
/public/profile-component.html