Angular
रूटिंग

बच्चों के साथ रूटिंग

मैंने यह पाया कि app.rout.ts या app.module.ts फ़ाइल (आपकी वरीयता के आधार पर) के अंदर बच्चों के मार्गों को ठीक से घोंसला बनाने का तरीका है। WebPack या SystemJS का उपयोग करते समय यह दृष्टिकोण काम करता है।

नीचे दिए गए उदाहरण में घर, घर / काउंटर और घर / काउंटर / भ्रूण-डेटा के लिए मार्ग दिखाए गए हैं। पहले और आखिरी मार्गों को पुनर्निर्देश का उदाहरण माना जा रहा है। अंत में उदाहरण के लिए एक अलग फ़ाइल में आयात किए जाने वाले रूट को निर्यात करने का एक उचित तरीका है। पूर्व के लिए। app.module.ts

आगे की व्याख्या करने के लिए, कोणीय की आवश्यकता है कि आपके पास बच्चों के सरणी में एक मार्ग रहित मार्ग है जिसमें मूल घटक का प्रतिनिधित्व करने के लिए मूल घटक शामिल है। यह थोड़ा भ्रामक है, लेकिन यदि आप एक बच्चे के मार्ग के लिए रिक्त URL के बारे में सोचते हैं, तो यह मूल 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 { }

सिराज के माध्यम से महान उदाहरण और विवरण

बेसिक रूटिंग

राउटर अनुप्रयोग के साथ उपयोगकर्ता की बातचीत के आधार पर एक दृश्य से दूसरे तक नेविगेशन को सक्षम बनाता है।

निम्नलिखित कोणीय में बुनियादी मार्ग को लागू करने के चरण हैं -

नोट : सुनिश्चित करें कि आपके पास यह टैग है:

<base href='/'> 

आपकी index.html फ़ाइल में आपके हेड टैग के तहत पहला बच्चा है। यह तत्व बताता है कि आपका ऐप फ़ोल्डर एप्लिकेशन रूट है। कोणीय तो अपने लिंक को व्यवस्थित करने के लिए पता होगा।

1. पता लगाएं कि आपको (कोणीय के नवीनतम संस्करण का उपयोग करके) package.json में सही / नवीनतम मार्ग निर्भरता की ओर इशारा करते रहे हैं और आप पहले से ही एक था कि 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 , इसे imports तहत @NgModule([]) अंतर्गत रखें:

   // 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 में खाली पथ निर्दिष्ट है। मार्गों से जुड़े घटकों को लोड करने के लिए html एंकर टैग के साथ RouterLink निर्देश का उपयोग किया जाता है। 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 एक सरणी लेता है जहां पहला पैरामीटर रूटिंग के लिए पथ है और बाद के तत्व डायनामिक रूटिंग मापदंडों के लिए हैं।