Пример маршрутизации модуля с угловым 2

Question

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

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

Редактировать: Я понимаю, что a somewhat similar question уже был задан и ответил. Есть две причины, почему я не считаю, что это особенно полезно:

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

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

Answer 1

Давайте посмотрим, охватывает ли этот пример то, что вы ищете.

Эти модули используются:

• AppModule (модуль корень)
• UsersModule (модуль функции)

Отрывки ниже упрощаются.

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 { } 

пользователей.маршрутизации

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

Answer 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

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

Общественный

`/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