Child Routing

მისამართის ცვლილება არ ხდება მხოლოდ ზედა დონეზე. არის შემთხვევები, როცა გვინდა კონკრეტული მისამართის შიგნით ნავიგაცია. აქ, წინასწარ გამზადებულ აპლიკაციაში გვაქვს ორი კომპონენტი: FirstComponent LastComponent და ისინი სათანადო მისამართებზე იტვირთება, როგორც ეს როუთინგის კონფიგურაციაშია:

app.routes.ts-ში:

import { Routes } from "@angular/router";
import { FirstComponent } from "./first/first.component";
import { SecondComponent } from "./second/second.component";

export const routes: Routes = [
  { path: "first", component: FirstComponent },
  { path: "second", component: SecondComponent },
  { path: "", redirectTo: "first", pathMatch: "full" },
];

router-outlet გვაქვს განთავსებული AppComponent-ში. აქვე გვაქვს ჰედერი, საიდანაც ვაკეთებთ ნავიგაციას:

<header>
  <nav>
    <ul>
      <li><a routerLink="/first" routerLinkActive="active">First</a></li>
      <li><a routerLink="/second" routerLinkActive="active"> Second</a></li>
    </ul>
  </nav>
</header>
<router-outlet></router-outlet>

შენიშვნა: არ დაგავიწყდეთ კომპონენტში RouterModule-ის შემოტანა.

ახლა ვთქვათ გვინდა, რომ Second კომპონენტის შიგნით შევძლოთ კიდევ სხვადასხვა კომპონენტზე ნავიგაცია. შევქმნათ ორი კომპონენტი SecondComponent-ის შიგნით.

ng g c second/child-one

ng g c second/child-two

ამ კომპონენტებს უკვე აქვთ თემფლეითში მარკაპი, რომ შედეგი დავინახოთ. ახლა კონფიგურაციას მივხედოთ app.routes.ts-ში:

import { Routes } from "@angular/router";
import { FirstComponent } from "./first/first.component";
import { ChildOneComponent } from "./second/child-one/child-one.component";
import { ChildTwoComponent } from "./second/child-two/child-two.component";
import { SecondComponent } from "./second/second.component";

export const routes: Routes = [
  { path: "first", component: FirstComponent },
  {
    path: "second",
    component: SecondComponent,
    children: [
      { path: "child-one", component: ChildOneComponent },
      { path: "child-two", component: ChildTwoComponent },
    ],
  },
  { path: "", redirectTo: "first", pathMatch: "full" },
];

იმ როუთისთვის, რომლის შიგნითაც გვინდა დამატებითო როუთების შექმნა, ვწერთ თვისება childern-ს სადაც გვექნება იგივე როუთის ობიექტების მასივი. აქ უკვე ჩვენ ახალ შექმნილ კომპონენტებს მივუთითებთ. დააკვირდით, რომ აქ პირდაპირ second როუთის შემდეგ რა მისამართი უნდა მოვიდეს იმას ვწერთმ და არა პირდაპირ second/child-one-ს, თუმცა ბრაუზერის მისამართში ეს სწორედ ასე იქნება.

ახლა SecondComponent-ში შევქმნათ ნავიგაციის ლინკები და, რა თქმა უნდა, router-outlet.

<p>second works!</p>
<nav>
  <ul>
    <li><a routerLink="child-one">Child One</a></li>
    <li><a routerLink="child-two">Child Two</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

დააკვირდით, რომ ახლა ვიყენებთ ფარდობით მისამართებს, ისინი არ იწყებიან /-ით. ეს ნიშნავს, რომ მიმდინარე მისამართის შიგნით მოხდება ნავიგაცია routerLink-ში ნაწილზე. ანუ შედეგად გვექნება second/child-one და second/child-two. თუ მას წინ დახრილ ხაზს დავუწერდით, ეს იქნებოდა გლობალური მისამართი, ანუ localhost:4200/child-one, რომელიც ჩვენ პროექტში არ არსებობს.

ახლა second მისამართის შიგნით child routing უნდა მუშაობდეს.

რამდენიმე რაუთის ერთდროულად ზარმაცად ჩატვირთვა

ჩვენ შეგვიძლია მთლიანი რაუთების კონფიგურაცია ჩავტვირთოთ ზარმაცად. წარმოვიდგინოთ რომ პროექტში გვაქვს ფოლდერი admin სადაც ინახება ადმინისტრატორის გვერდის კომპონენტები. ესენია: admin-home.component.ts, სადაც ადმინისტრატორის მთავარი გვერდია (/admin/home) და admin-users.component.ts, სადაც ადმინისტრატორი მომხმარებლებს მართავს (/admin/users). ამავე ფოლდერში შეიძლება გვქონდეს რაუთების კონფიგურაცია:

// admin/admin.routes.ts

export const ADMIN_ROUTES: Route[] = [
  { path: "home", component: AdminHomeComponent },
  { path: "users", component: AdminUsersComponent },
  // ...
];

მაშინ შეგვიძლია მთავარი რაუთების კონფიგურაციის ობიექტში (app.routes.ts-ში) ის შემოვიტანოთ loadChildren თვისების ქვეშ:

// app.routes.ts
export const routes: Route[] = [
  {
    path: "admin",
    loadChildren: () =>
      import("./admin/routes").then((mod) => mod.ADMIN_ROUTES),
  },
  // ...
];