tutorial - how to post list in angular 4




কিভাবে কৌণিক মধ্যে একটি রুট পরিবর্তন সনাক্ত? (11)

আমি আমার AppComponent কোনও রুট পরিবর্তন সনাক্ত করতে AppComponent

তারপরে আমি গ্লোবাল ব্যবহারকারীর টোকেনটি পরীক্ষা করে দেখব যে তিনি লগ ইন করেছেন কিনা if তারপরে আমি লগ-ইন না হয়ে ব্যবহারকারীকে পুনর্নির্দেশ করতে পারি।


নিম্নলিখিত পদ্ধতিতে রুট পরিবর্তন ইভেন্টগুলি ক্যাপচার করুন ...

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

constructor(private router: Router) {
router.events.subscribe(
        (event) => {
            if (event instanceof NavigationStart)
                // start loading pages
            if (event instanceof NavigationEnd) {
                // end of loading paegs
            }
        });
}

আমি কৌনিক 5 অ্যাপ্লিকেশন নিয়ে কাজ করছি এবং আমি একই সমস্যার মুখোমুখি হচ্ছি। যখন আমি কৌনিক ডকুমেন্টেশন দিয়ে যাই তারা রাউটার ইভেন্টগুলি পরিচালনা করার জন্য সর্বোত্তম সমাধান সরবরাহ করে following নিম্নলিখিত নথিটি দেখুন।

কোনও নেভিগেশন সফলভাবে শেষ হলে ট্রিগার হওয়া ইভেন্টটির প্রতিনিধিত্ব করে

এটি কিভাবে ব্যবহার করবেন?

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();
  }
} 

কখন এটি ব্যবহার করবেন?

আমার ক্ষেত্রে আমার অ্যাপ্লিকেশনটি ব্যবহারকারীর, অ্যাডমিনদের মতো সমস্ত ব্যবহারকারীর জন্য সাধারণ ড্যাশবোর্ড শেয়ার করে তবে ব্যবহারকারীর ধরণ অনুসারে আমাকে কিছু নভবার অপশন দেখানো এবং আড়াল করা দরকার।

এই কারণেই যখনই ইউআরএল পরিবর্তিত হয় তখন আমাকে পরিষেবা পদ্ধতিতে কল করতে হবে যা প্রতিক্রিয়া অনুসারে ব্যবহারকারীর তথ্য লগইন করে আমি আরও ক্রিয়াকলাপে যাব।


উপাদানটিতে, আপনি এটি চেষ্টা করতে পারেন:

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;
                }
                }
            }
        });
    }
}

কৌণিক 4.x এবং উপরে:

এটি নীচের মতো ActivatedRoute শ্রেণির url সম্পত্তি ব্যবহার করে অর্জন করা যেতে পারে,

import { ActivatedRoute } from '@angular/router`

দ্রষ্টব্য: আপনার angular/router প্যাকেজ থেকে সরবরাহকারীটি আমদানি এবং ইনজেক্ট করতে হবে

constructor(private activatedRoute : ActivatedRoute){  }

এবং

import { Router, NavigationEnd } from '@angular/router';

import { filter } from 'rxjs/operators';

constructor(
  private router: Router
) {
  router.events.pipe(
    filter(event => event instanceof NavigationEnd)  
  ).subscribe((event: NavigationEnd) => {
    console.log(event.url);
  });
}

কৌনিক 2 এ আপনি একটি রাউটার উদাহরণটিতে (আরএক্স ইভেন্ট) subscribe করতে পারেন। সুতরাং আপনি যেমন জিনিস করতে পারেন

class MyClass {
  constructor(private router: Router) {
    router.subscribe((val) => /*whatever*/)
  }
}

সম্পাদনা করুন (আরসি 1 থেকে)

class MyClass {
  constructor(private router: Router) {
    router.changes.subscribe((val) => /*whatever*/)
  }
}

2 সম্পাদনা করুন (২.০.০ থেকে)

আরও দেখুন: রাউটার.এভেন্টস ডক

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // see also 
        console.log(val instanceof NavigationEnd) 
    });
  }
}

নিম্নলিখিত ধরণের কাজ করে এবং আপনার জন্য কৌতূহলপূর্ণ হতে পারে।

// 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 ডেকোরেটর রয়েছে তবে এটি ক) কেন্দ্রীভূত নয় এবং খ) ইনজেকশন পরিষেবাদি থেকে উপকৃত হয় না।

যদি কেউ কোনও রুটটি প্রতিশ্রুতিবদ্ধ হওয়ার আগে কেন্দ্রীয়ভাবে অনুমোদনের আরও ভাল উপায়ের পরামর্শ দিতে পারে তবে এটি দুর্দান্ত। আমি নিশ্চিত আরও ভাল উপায় থাকতে হবে।

এটি আমার বর্তমান কোড (রুট পরিবর্তন শোনার জন্য আমি কীভাবে এটি পরিবর্তন করব?):

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: '/'})]);

বেশিরভাগ সমাধানের উপরে সঠিক, তবে আমি এই এমিটটি একাধিকবার 'নেভিগেশন এমিট' ইভেন্টের মুখোমুখি করছি w আমি যখন কোনও ইভেন্টে এই ইভেন্টটি চালিত করেছিলাম তখনই তা পরিবর্তন করা হয়েছিল। সুতরাং শুনুন কৌণিক 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");
            }
        });
    }
}

রাউটার 3.0.0-beta.2 হওয়া উচিত

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

@ লুডোহেন উত্তরটি দুর্দান্ত, তবে আপনি যদি নীচের ব্যবহারটি instanceof ব্যবহার করতে না চান তবে

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

এইভাবে আপনি বর্তমান ইভেন্টের নামটি স্ট্রিং হিসাবে পরীক্ষা করতে পারেন এবং যদি ইভেন্টটি ঘটে থাকে তবে আপনি নিজের ফাংশনটি করার জন্য যা পরিকল্পনা করেছিলেন তা করতে পারেন।


আরএক্সজেএস 6

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

পিলোনরেজকে ধন্যবাদ (নীচে মন্তব্য দেখুন)

নতুন রাউটার> = আরসি ৩

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);
            }
        });

   }
}




angular