Angular හි දරු මාර්ග

ගමන් මාර්ගකරණයේ දැනටමත් භාවිතා කරන සංරචකයක, දරු සංරචක ද තිබිය හැකිය. මෙම දරු සංරචක ද ගමන් මාර්ගකරණය හරහා පෙන්වීමට හැකියාව ඇත.

උදාහරණයක් ලෙස, අප සතුව Aaaa සංරචකයක් ඇතැයි සිතමු. අපි එය URL /aaaa/ හරහා ප්‍රවේශ වෙමු. දැන් අපි දරු සංරචක දෙකක් සාදමු: Chix සහ Chiy. අපි ඒවා පෙන්වන්නේ Aaaa සංරචකයේ දර්ශනය තුළය. Aaaa සංරචකයට එහිම router-outlet ටැගයක් ඇති අතර, URL අනුව දරු සංරචකවලින් එකක් හෝ අනෙක පෙන්වනු ඇත.

ඉතින්, අපි විස්තර කරන ලද දේ ක්‍රියාත්මක කරමු.

පළමු දරු සංරචකය සාදමු:

terminalng generate component chix

දෙවන දරු සංරචකය සාදමු:

terminalng generate component chiy

වෙනම දරු මාර්ග ලියන්න:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

ඒවා Aaaa සංරචකයේ මාර්ගයට දරු මාර්ග ලෙස එකතු කරමු:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

මාපිය සංරචකයේ මාර්ග පථය දරු මාර්ගයේ ආරම්භය වේ. මෙයින් අදහස් වන්නේ දරු සංරචක පහත URL මගින් ප්‍රවේශ විය හැකි බවයි: /aaaa/chix සහ /aaaa/chiy.

දැන් අපි Aaaa සංරචකය සකස් කරමු. ගමන් මාර්ගකරණය සඳහා ටැගය ආයාත කරමු:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

එය දේශනය තුළ ලියන්න:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

ටැගය දර්ශනයට ඇතුල් කරමු:

app/aaaa/aaaa.component.html<p>එය ක්‍රියාත්මක වේ</p>
<router-outlet></router-outlet>

දැන් ඔබට ඔවුන්ගේ URL මගින් දරු සංරචක වෙත ප්‍රවේශ වීමට හැකි වන අතර මෙම සංරචක පෙන්වනු ඇත. උත්සාහ කරන්න!