Angular
маршрутизация

Маршрутизация с детьми

Я нашел, что это способ правильно встраивать маршруты детей внутри файла app.routing.ts или app.module.ts (в зависимости от ваших предпочтений). Этот подход работает при использовании WebPack или SystemJS.

В приведенном ниже примере показаны маршруты для дома, дома / счетчика и данных home / counter / fetch. Первый и последний маршруты являются примерами перенаправления. Наконец, в конце примера приведен правильный способ экспорта маршрута, который должен быть импортирован в отдельный файл. Напр. app.module.ts

Для дальнейшего объяснения, Угловая требует, чтобы у вас был беспроблемный маршрут в массиве children, который включает в себя родительский компонент, для представления родительского маршрута. Это немного запутанно, но если вы думаете о пустом URL-адресе для детского маршрута, он по существу будет равен тому же URL-адресу, что и родительский маршрут.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

Отличный пример и описание через Siraj

Основная маршрутизация

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

Ниже приводятся шаги по реализации базовой маршрутизации в Angular -

ПРИМЕЧАНИЕ . Убедитесь, что у вас есть этот тег:

<base href='/'> 

как первый ребенок под вашим тегом заголовка в вашем файле index.html. Этот элемент указывает, что папка вашего приложения является корнем приложения. Угловой тогда будет знать, как организовать ваши ссылки.

1. Проверьте, указали ли вы правильные / последние зависимости маршрутизации в package.json (используя последнюю версию Angular) и что вы уже npm install -

   "dependencies": {
       "@angular/router": "^4.2.5"
   }
   

2. Определите маршрут согласно определению интерфейса:

   interface Route {
     path?: string;
     pathMatch?: string;
     component?: Type<any>;
   }
   

3. В файле маршрутизации ( routes/app.routing.ts ) импортируйте все компоненты, которые необходимо настроить для разных маршрутов маршрутизации. Пустой путь означает, что представление загружается по умолчанию. «:» в пути указывает динамический параметр, переданный загруженному компоненту.

   import { Routes, RouterModule } from '@angular/router';
   import { ModuleWithProviders } from '@angular/core';
   import { BarDetailComponent } from '../components/bar-detail.component';
   import { DashboardComponent } from '../components/dashboard.component';
   import { LoginComponent } from '../components/login.component';
   import { SignupComponent } from '../components/signup.component';
   
   export const APP_ROUTES: Routes = [
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'dashboard', component: DashboardComponent },
       { path: 'bars/:id', component: BarDetailComponent },
       { path: 'login', component: LoginComponent },
       { path: 'signup',   component: SignupComponent }
   ];
   export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
   

4. В свой app.module.ts поместите это под @NgModule([]) под imports :

   // Alternatively, just import 'APP_ROUTES
   import {APP_ROUTING} from '../routes/app.routing.ts';
   @NgModule([
       imports: [
           APP_ROUTING
           // Or RouterModule.forRoot(APP_ROUTES)
       ]
   ])
   

5. Загружать / отображать компоненты маршрутизатора на основе доступа к пути. Директива <router-outlet> используется для указания угловой нагрузки, где загружается компонент.

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <div>
               <router-outlet></router-outlet>
           </div>
       `
   })
   export class AppComponent {}
   

6. Свяжите другие маршруты. По умолчанию RouterOutlet загрузит компонент , для которого пустой путь указан в Routes . Директива RouterLink используется с тэгом html anchor для загрузки компонентов, подключенных к маршрутам. RouterLink генерирует атрибут href, который используется для создания ссылок. Например:

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'demo-app',
       template: `
           <a [routerLink]="['/login']">Login</a>
           <a [routerLink]="['/signup']">Signup</a>      
           <a [routerLink]="['/dashboard']">Dashboard</a>
           <div>
               <router-outlet></router-outlet>
           </div>
           `
   })
   export class AnotherComponent { }
   

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

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SecondComponent { }

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