javascript - কৌণিক 2 রাউটার ইভেন্ট শ্রোতা




angular typescript (4)

আপনি filter() ইভেন্টগুলি ফিল্টারও করতে পারেন।

তবে কেবল filter(e => e is NavigationEnd) ব্যবহার করবেন না filter(e => e is NavigationEnd)

আরও ভাল সমাধান হ'ল এর মতো filter() করতে 'টাইপ গার্ড' যুক্ত করা:

 filter((e): e is NavigationEnd => e instanceof NavigationEnd), 

এতে দুটি জিনিস রয়েছে:

  • e is NavigationEnd এবং এটি হ'ল দৃser়তা যে আপনি কোনও ফাংশনটি সংজ্ঞায়িত করছেন (এটি টাইপস্ক্রিপ্ট বাক্য গঠন)
  • e instanceof NavigationEnd এবং এটি প্রকৃত রানটাইম কোড যা প্রকারটি পরীক্ষা করে

এটির সাথে দুর্দান্ত জিনিসটি হ'ল অপারেটররা আরও 'পাইপ' নামিয়ে রাখুন, যেমন নীচের map এখনই জানেন যে টাইপটি NavigationEnd , তবে টাইপ-গার্ড ছাড়া আপনার টাইপ Event

আপনার যদি কেবলমাত্র একটি ইভেন্ট প্রকারের জন্য যাচাই করা দরকার তবে এটি করার সর্বোত্তম উপায় এটি। সংকলক ত্রুটিগুলি এড়াতে কড়া মোডে এটি প্রয়োজনীয় বলে মনে হয়।

কৌনিক 2 রাউটারে রাষ্ট্রীয় পরিবর্তন কীভাবে শুনবেন?

কৌণিক 1.x এ আমি এই ইভেন্টটি ব্যবহার করেছি:

$rootScope.$on('$stateChangeStart',
    function(event,toState,toParams,fromState,fromParams, options){ ... })

সুতরাং, আমি যদি কৌনিক 2 এ এই ইভেন্টলিস্টারটি ব্যবহার করি:

window.addEventListener("hashchange", () => {return console.log('ok')}, false);

এটি 'ঠিক আছে' ফিরে আসে না, তারপরে জেএস থেকে রাষ্ট্র পরিবর্তন করুন, কেবল তখনই ব্রাউজারের ইতিহাস historyব্যাক () ফাংশন রান।

রাউটার.সউসক্রাইব () ফাংশনটি পরিষেবা হিসাবে ব্যবহার করুন:

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';

@Injectable()
export class SubscribeService {
    constructor (private _router: Router) {
        this._router.subscribe(val => {
            console.info(val, '<-- subscribe func');
        })
    }
}

রাউটিংয়ে সূচনা করা উপাদানগুলিতে ইনজেকশন পরিষেবা:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    selector: 'main',
    templateUrl: '../templates/main.html',
    providers: [SubscribeService]
})
export class MainComponent {
    constructor (private subscribeService: SubscribeService) {}
}

আমি এই পরিষেবাটি অন্য উপাদান যেমন এই উদাহরণে ইনজেক্ট করি। তারপরে আমি স্থিতি পরিবর্তন করছি, পরিষেবাতে কনসোল.ইনফো () কাজ করছে না।

আমি কী ভুল করছি?


আপনি @ GünterZöchbauer এর উত্তর হিসাবে instanceof ব্যবহার করতে পারেন

this.router.events.subscribe(event => {
  if(event instanceof NavigationStart) {
    // do something...
  }
}

অথবা আপনি একটি অলস পদ্ধতির ব্যবহার করতে পারেন, তবে মনে রাখবেন ক্রিয়াকলাপটি এখনও কাজ করার সময় কনস্ট্রাক্টরের নাম সহজেই পরিবর্তন করা যেতে পারে!

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

কৌনিক 2 এ, "app.modules.ts" -> আমদানি ফাইল যান

RouterModule.forRoot(
      appRoutes,
      { 
         enableTracing: true
      }
)

সক্ষম শোতে রুটগুলি সক্রিয়করণে সক্রিয়করণে কনসোলে উদ্ঘাটনগুলি মিথ্যা আড়াল করার পথটি সন্ধান করে কনসোলে অনুসন্ধান


সমস্ত রাজ্যের পরিবর্তন শোনার জন্য, ডিফল্ট রাউটারআউটলেট প্রসারিত করুন এবং 'অ্যাক্টিভেট' এবং 'নিষ্ক্রিয়' হ্যান্ডলারগুলিতে আপনার নিজস্ব যুক্তি যুক্ত করুন।

import {Directive} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';

@Directive({
  selector: 'router-outlet'
})

export class MyOwnRouterOutlet extends RouterOutlet {
  ...

  activate() {
    console.log('Hello from the new router outlet!');
  }
}

'কাস্টম রাউটার আউটলেট' উদাহরণ থেকে এখানে অনুলিপি করা হয়েছে: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/ घटक-router-in-depth/





angular2-routing