কৌণিক 2 - এই.আর.টার.প্রেন্ট.ন্যাভিগেট ('/ প্রায়') ব্যবহার করে অন্য রুটে কীভাবে নেভিগেট করা যায়?


186

কৌণিক 2 - ব্যবহার করে অন্য রুটে কীভাবে নেভিগেট করা যায় this.router.parent.navigate('/about')

এটা কাজ করে না বলে মনে হচ্ছে। আমি চেষ্টা করেছি location.go("/about");যে কাজ হয়নি।

মূলত কোনও ব্যবহারকারী লগইন করার পরে আমি তাদের অন্য পৃষ্ঠায় পুনঃনির্দেশ করতে চাই।

নীচে আমার কোডটি এখানে:

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('Mark@gmail.com', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }

এছাড়াও, আমি আমার app.ts ফাইলটিতে রুট কনফিগারটি সেট করেছি: @ রউটকনফিগ ([[{পথ: '/', পুনর্নির্দেশ: '/ হোম'}, {পথ: '/ হোম', উপাদান: টোডো, হিসাবে : 'হোম'}, {পথ: '/ সম্পর্কে', উপাদান: সম্পর্কে, যেমন: 'সম্পর্কে'}])
কৌণিক এম

/এটি আপনার প্রয়োজন অনুসারে আপনার সরানো উচিত
mast3rd3mon

উত্তর:


317

নিখুঁত পাথ রুটিং

নেভিগেশন জন্য 2 পদ্ধতি আছে, .navigate()এবং.navigateByUrl()

আপনি .navigateByUrl()পরম পাথ রাউটিংয়ের জন্য পদ্ধতিটি ব্যবহার করতে পারেন :

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

আপনি যে উপাদানটিতে নেভিগেট করতে চান তার URL এর নিরঙ্কুশ পথটি রেখেছেন।

দ্রষ্টব্য: রাউটারের navigateByUrlপদ্ধতিতে কল করার সময় সর্বদা সম্পূর্ণ নিখুঁত পাথ নির্দিষ্ট করুন । সম্পূর্ণ পাথ অবশ্যই একটি শীর্ষস্থানীয় দিয়ে শুরু করা উচিত/

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

আপেক্ষিক পাথ রুটিং

আপনি যদি আপেক্ষিক পথের রাউটিং ব্যবহার করতে চান তবে .navigate()পদ্ধতিটি ব্যবহার করুন ।

দ্রষ্টব্য: রাউটিংটি কীভাবে কাজ করে তা বিশেষত অভিভাবক, ভাইবোন এবং শিশু রুটগুলি কীভাবে কার্যকর হয়:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

বা আপনার যদি কেবলমাত্র বর্তমান রুটের পাথের মধ্যে নেভিগেটের প্রয়োজন হয় তবে একটি ভিন্ন রুটের প্যারামিটারে:

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

লিঙ্ক পরামিতি অ্যারে

একটি লিঙ্ক পরামিতি অ্যারে রাউটার নেভিগেশনের জন্য নিম্নলিখিত উপাদানগুলি ধারণ করে:

  • গন্তব্য উপাদানটির পথে যাওয়ার পথ। ['/hero']
  • প্রয়োজনীয় এবং alচ্ছিক রুট প্যারামিটারগুলি যা রুট URL এ যায়। ['/hero', hero.id]অথবা['/hero', { id: hero.id, foo: baa }]

ডিরেক্টরি মত সিনট্যাক্স

রাউটারটি রুটের নাম অনুসন্ধানে সহায়তার জন্য লিঙ্ক পরামিতিগুলির তালিকায় ডিরেক্টরি-এর মতো সিনট্যাক্স সমর্থন করে:

./ বা কোনও শীর্ষস্থানীয় স্ল্যাশ বর্তমান স্তরের তুলনায় নয়।

../ রুটের পথে এক স্তর পর্যন্ত যেতে।

আপনি পূর্বপুরুষের পাথের সাথে আপেক্ষিক নেভিগেশন সিনট্যাক্স একত্রিত করতে পারেন। যদি আপনাকে অবশ্যই কোনও ভাইবাল রুটে চলাচল করতে হয় তবে আপনি ../<sibling>কনভেনশনটি এক স্তরের উপরে যেতে, তারপরে ভাইবাল রুটের পথ ধরে নীচে যেতে পারেন।

আপেক্ষিক নাগরিককরণ সম্পর্কিত গুরুত্বপূর্ণ নোটসমূহ

Router.navigateপদ্ধতির সাথে কোনও আপেক্ষিক পাথ নেভিগেট করতে ActivatedRouteআপনার বর্তমান রুট ট্রিতে কোথায় আছেন তার রাউটার জ্ঞান দেওয়ার জন্য আপনাকে সরবরাহ করতে হবে ।

লিঙ্ক পরামিতি অ্যারে পরে, একটি relativeToবৈশিষ্ট্য সেট সঙ্গে একটি বস্তু যুক্ত করুন ActivatedRoute। রাউটারটি তখন সক্রিয় রুটের অবস্থানের ভিত্তিতে টার্গেট URL গণনা করে।

সরকারী কৌণিক রাউটার ডকুমেন্টেশন থেকে


3
আপনার যদি শিশুদের রুট থাকে তবে আপনাকে মনে করুন: { path: 'home', component: Home, children: homeRoutes }তারপরে আপনি রাউটার পদ্ধতিতে এটি সরবরাহ করতে চান: this.router.navigate(['home/address-search'])বাthis.router.navigateByUrl(/'home/address-search')
ড্যানিয়েল রাম

এমনকি এটি একটি ভাল উত্তর, লক্ষ্য করা গুরুত্বপূর্ণ যে this.router= Router;এটি কিছু পাঠককে বিভ্রান্ত করতে পারে, এই ক্ষেত্রে রাউটারের নির্ভরতা ইনজেকশনের একটি উল্লেখ, যা পরিবর্তে আমাকে এই কোডটি ব্যবহার করা উচিত constructor( private router: Router )
সিদ্ধার্থ

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

@ তেত্রাদেভ এবং কোথা থেকে "এই.রোউট" এসেছে: ডি, এটি আপনার নির্ভরতার সাথে যুক্ত করুন
নুব

33

আপনার ব্যবহার করা উচিত

this.router.parent.navigate(['/About']);

রুটের পথ নির্দিষ্ট করার পাশাপাশি আপনি নিজের রুটের নামও নির্দিষ্ট করতে পারেন:

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);

1
হাই, যখন আমি এটি করি যে আমি আমার
টাইপস্ক্রিপ্ট সংকলনে

আমি এটি চেষ্টা করেছি এবং এটি কার্যকর হয়নি: this.router.parent.navigate ('[/ সম্পর্কে]');
কৌণিকুল

4
আপনার এই সিনট্যাক্সটি ব্যবহার করা উচিত: this.router.parent.navigate (['/ সম্পর্কে']]); আপনাকে অ্যারে পাস করতে হবে ['/ সম্পর্কে'] স্ট্রিং নয় [[সম্পর্কে]]
লুকা

রাউটার 3 বিটা ব্যবহারের জন্যthis._router.navigate(['/some-route']);
অ্যাড্রিয়ান মোইসা

27

এছাড়াও ব্যবহার করতে পারেন parent

রাউটার সংজ্ঞা যেমন বলুন:

{path:'/about',    name: 'About',   component: AboutComponent}

তারপরে nameপরিবর্তে নেভিগেট করতে পারেনpath

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

V2.3.0 এর জন্য আপডেট হয়েছে

ভি 2.0 নামের রাউটিংয়ে নামের সম্পত্তিটির আর কোনও অস্তিত্ব নেই। নাম সম্পত্তি ছাড়া রুট সংজ্ঞায়িত । সুতরাং আপনার নামের পরিবর্তে পথ ব্যবহার করা উচিত । এবং পথের জন্য কোনও অগ্রণী স্ল্যাশ নেই তাই ব্যবহারthis.router.navigate(['/path'])path: 'about' পরিবর্তে করুনpath: '/about'

রাউটার সংজ্ঞা যেমন:

{path:'about', component: AboutComponent}

তারপরে নেভিগেট করতে পারেন path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}

6
nameঅ্যাঙ্গুলার ২.০ তে রাউটের ধরণে অবচয় হয়।
RynoRn

কৌণিক 2 v2.3.0dataপরিবর্তে ব্যবহার করা উচিত name। আরও বিশদের জন্য -> কৌণিক.ই.ও.
ডকস /

8
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');

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

2

ব্যক্তিগতভাবে, আমি দেখতে পেয়েছি যেহেতু আমরা একটি ngRoutesসংগ্রহ (দীর্ঘ গল্প) বজায় রাখি আমি এর থেকে সবচেয়ে বেশি আনন্দ পাই :

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

আমি আসলে আমাদের সাক্ষাত্কার প্রশ্নের একটি অংশ হিসাবে এটি ব্যবহার করি। এইভাবে, আমি GOTO(1)হোম পেজ পুনঃনির্দেশের জন্য দৌড়ানোর সময় কারা কুইচছে তা দেখার মাধ্যমে কে চিরকালের জন্য বিকাশ করছে সে সম্পর্কে একটি তাত্ক্ষণিক পাঠ পেতে পারি ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.