tutorial - angular meaning

निम्नलिखित तरीके से मार्ग परिवर्तन की घटनाओं को कैप्चर करें ...

import { Component, OnInit, Output, ViewChild } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: "my-app",
    templateUrl: "app/app.component.html",
    styleUrls: ["app/app.component.css"]
})
export class AppComponent {

    constructor(private cacheComponentObj: CacheComponent,
        private router: Router) {

        /*  Route event types
            NavigationEnd
            NavigationCancel
            NavigationError
            RoutesRecognized
        */
        router.events.forEach((event: NavigationEvent) => {

            //Before Navigation
            if (event instanceof NavigationStart) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }

            //After Navigation
            if (event instanceof NavigationEnd) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }
        });
    }
}

अधिकांश समाधान सही हैं, लेकिन मैं इस समस्या का सामना कर रहा हूं, यह कई बार 'नेविगेशन उत्सर्जन' घटना है। जब भी इस घटना को चालू किया जाता है मैं बदल रहा था। तो सुनिए एंगुलर 6 का पूरा समाधान।

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd } from '@angular/router';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    constructor(private router: Router) { }
    ngOnInit(): void {
        //calls this method when navigation ends
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                //calls this stuff when navigation ends
                console.log("Event generated");
            }
        });
    }
}

कोणीय 4.x और ऊपर:

यह नीचे दिए गए के रूप में ActivatedRoute वर्ग की url संपत्ति का उपयोग करके प्राप्त किया जा सकता है,

this.activatedRoute.url.subscribe(url =>{
     console.log(url);
});

ध्यान दें: आपको angular/router पैकेज से प्रदाता को आयात और इंजेक्ट करने की आवश्यकता है

import { ActivatedRoute } from '@angular/router`

तथा

constructor(private activatedRoute : ActivatedRoute){  }

कोणीय 6 और RxJS6 में:

import { filter, debounceTime } from 'rxjs/operators';

 this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      debounceTime(40000)
    ).subscribe(
      x => {
      console.log('val',x);
      this.router.navigate(['/']); /*Redirect to Home*/
}
)

जैसे AppRoutModule पर बदलाव करें

@NgModule({
imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})

निम्नलिखित काम करता है और आप के लिए मुश्किल हो सकता है।

// in constructor of your app.ts with router and auth services injected
router.subscribe(path => {
    if (!authService.isAuthorised(path)) //whatever your auth service needs
        router.navigate(['/Login']);
    });

दुर्भाग्य से यह बाद में मुझे पसंद है की तुलना में अनुमार्गण प्रक्रिया में पुनर्निर्देश करता है। मूल लक्ष्य घटक के onActivate() को रीडायरेक्ट से पहले कहा जाता है।

एक @CanActivate डेकोरेटर है जिसे आप लक्ष्य घटक पर उपयोग कर सकते हैं लेकिन यह a) केंद्रीकृत नहीं है और b) इंजेक्शन सेवाओं से लाभ नहीं @CanActivate ।

यह बहुत अच्छा होगा अगर कोई भी प्रतिबद्ध होने से पहले एक मार्ग को केंद्रीय रूप से अधिकृत करने का बेहतर तरीका सुझा सकता है। मुझे यकीन है कि एक बेहतर तरीका होना चाहिए।

यह मेरा वर्तमान कोड है (मार्ग परिवर्तन को सुनने के लिए मैं इसे कैसे बदलूंगा?):

import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
import {ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';    
import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import { Todo } from './components/todo/todo';
import { About } from './components/about/about';

@Component({
    selector: 'app'
})

@View({
    template: `
        <div class="container">
            <nav>
                <ul>
                    <li><a [router-link]="['/Home']">Todo</a></li>
                    <li><a [router-link]="['/About']">About</a></li>
                </ul>
            </nav>
            <router-outlet></router-outlet>
        </div>
    `,
    directives: [RouterOutlet, RouterLink]
})

@RouteConfig([
    { path: '/', redirectTo: '/home' },
    { path: '/home', component: Todo, as: 'Home' },
    { path: '/about', component: About, as: 'About' }
])

class AppComponent {    
    constructor(location: Location){
        location.go('/');
    }    
}    
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]);

मैं कोणीय 5 अनुप्रयोग के साथ काम कर रहा हूं और मैं उसी मुद्दे का सामना कर रहा हूं। जब मैं कोणीय दस्तावेज़ीकरण से गुजरता हूं तो वे राउटर घटनाओं से निपटने के लिए सबसे अच्छा समाधान प्रदान करते हैं। दस्तावेज़ के बाद जांच करें।

• कोणीय 5 में कोणीय मार्ग की घटनाओं में राउटर इवेंट

• लेकिन विशेष रूप से मामले के लिए प्रश्न में हमें नेविगेशनएंड इवेंट की आवश्यकता है

  नेविगेशन अंत घटना कोणीय

जब नेविगेशन सफलतापूर्वक समाप्त हो जाता है तो एक घटना का प्रतिनिधित्व करता है

इसका उपयोग कैसे करें?

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';    

export class FooComponent implements OnInit, OnDestroy {
   private _routerSub = Subscription.EMPTY;
   constructor(private router: Router){}

   ngOnInit(){
     this._routerSub = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((value) => {
         //do something with the value
     });
  }

  ngOnDestroy(){
   this._routerSub.unsubscribe();
  }
} 

इसका उपयोग कब करें?

मेरे मामले में मेरा आवेदन सभी उपयोगकर्ताओं के लिए आम डैशबोर्ड साझा करता है जैसे कि उपयोगकर्ता, एडमीन, लेकिन मुझे उपयोगकर्ता प्रकार के अनुसार कुछ नौबार विकल्प दिखाने और छिपाने की आवश्यकता है।

इसीलिए जब भी url में परिवर्तन होता है, मुझे सेवा पद्धति पर कॉल करने की आवश्यकता होती है, जो प्रतिक्रिया के अनुसार उपयोगकर्ता जानकारी में लॉग इन करता है, मैं आगे के संचालन के लिए जाऊंगा

राउटर 3.0.0-beta.2 होना चाहिए

this.router.events.subscribe(path => {
  console.log('path = ', path);
});

@Ludohen उत्तर बहुत अच्छा है, लेकिन अगर आप instanceof लिए निम्नलिखित का उपयोग नहीं करना चाहते हैं

this.router.events.subscribe(event => {
  if(event.constructor.name === "NavigationStart") {
    // do something...
  }
});

इस तरह से आप वर्तमान ईवेंट नाम को एक स्ट्रिंग के रूप में देख सकते हैं और यदि ईवेंट हुआ है तो आप वही कर सकते हैं जो आपने अपने फ़ंक्शन को करने की योजना बनाई थी।

आरएक्सजेएस 6

router.events.pipe(filter(event => event instanceof NavigationStart))

Peilonrayz के लिए धन्यवाद (नीचे टिप्पणी देखें)

नया राउटर> = RC.3

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

आप दिए गए ईवेंट को भी फ़िल्टर कर सकते हैं:

import 'rxjs/add/operator/filter';

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });
}

पिछले और वर्तमान घटना को प्राप्त करने के लिए pairwise ऑपरेटर का उपयोग करना भी एक अच्छा विचार है। https://github.com/angular/angular/issues/11268#issuecomment-244601977

import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router;

export class AppComponent {
    constructor(private router: Router) {
        this.router.events.pairwise().subscribe((event) => {
            console.log(event);
        });
    };
}

कोणीय 7 के लिए किसी को लिखना चाहिए:

this.router.events.subscribe((event: Event) => {})

एक विस्तृत उदाहरण इस प्रकार हो सकता है:

import { Component } from '@angular/core'; 
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';

@Component({
    selector: 'app-root',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {

    constructor(private router: Router) {

        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
                // Show loading indicator
            }

            if (event instanceof NavigationEnd) {
                // Hide loading indicator
            }

            if (event instanceof NavigationError) {
                // Hide loading indicator

                // Present error to user
                console.log(event.error);
            }
        });

   }
}