আমি কীভাবে কোনও শিশু রুট থেকে পিতামাতার পথে যেতে পারি?

94

আমার সমস্যাটি বেশ ক্লাসিক। আমার কাছে একটি আবেদনের ব্যক্তিগত অংশ রয়েছে যা এ এর পিছনে রয়েছে login form। লগইন সফল হলে, প্রশাসক অ্যাপ্লিকেশনটির জন্য এটি একটি শিশু পথে যায়।

আমার সমস্যাটি হ'ল আমি এটি ব্যবহার করতে পারছি না global navigation menuকারণ রাউটারটি আমার AdminComponentপরিবর্তে আমার দিকে রুট করার চেষ্টা করে AppCompoment। সুতরাং আমার নেভিগেশন নষ্ট হয়ে গেছে।

অন্য সমস্যাটি হ'ল যদি কেউ সরাসরি ইউআরএল অ্যাক্সেস করতে চান তবে আমি প্যারেন্ট "লগইন" রুটে পুনর্নির্দেশ করতে চাই। তবে আমি এটি কাজ করতে পারি না। আমার কাছে মনে হচ্ছে এই দুটি বিষয় একই রকম।

কোন ধারণা কীভাবে এটি করা যায়?

angular angular-routing angular-router

— কার্ল বোয়েসভার্ট
সূত্র

4

দয়া করে কিছু কোড যুক্ত করুন

— জিয়াং ওয়াইডি

157

আপনি কি কোনও লিঙ্ক / এইচটিএমএল চান বা আপনি কি জরুরিভাবে / কোডে যাত্রা করতে চান?

লিঙ্ক : রাউটারলিঙ্কের নির্দেশ সর্বদা প্রদত্ত লিঙ্কটিকে বর্তমান ইউআরএলটির বদ্বীপ হিসাবে বিবেচনা করে:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

রাউটারলিঙ্ক সহ, অ্যারেটি আমদানি করতে এবং ব্যবহার করতে ভুলবেন না directives:

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

অনুজ্ঞাসূচক : navigate()পদ্ধতি সূচনা বিন্দু (অর্থাত, প্রয়োজন relativeToপ্যারামিটার)। যদি কোনও সরবরাহ না করা হয় তবে নেভিগেশনটি সম্পূর্ণ:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

— রাজকোককে চিহ্নিত করুন
সূত্র

4

router.navigate(string)পদ্ধতি কৌণিক বর্তমান সংস্করণ (2.2) এ অস্তিত্ব মনে হচ্ছে না। আমি দস্তাবেজগুলিতে অনুসন্ধান করেছি এবং কেবল পেয়েছি navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>। নাকি আমি পুরোপুরি কিছু মিস করছি?

— টমেটো

4

@ তোমাটো, আপনার রুটগুলির চারপাশে [] লাগানো দরকার। উদাহরণস্বরূপ, this.router.navigate (["../..//" "পিতা"], {আপেক্ষিকত: this.route});

— গে

4

আপনি relativeToযখন টাইপস্ক্রিপ্টের পরিবর্তে এইচটিএমএলে [রাউটারলিঙ্ক] ব্যবহার করছেন তখন আপনি কীভাবে ডেটা পাস করবেন ?

— redfox05

সেবা একই?

— oCcSking

কিছু কারণে, আমার ক্ষেত্রে পিতামাতাকে ( থেকে ) নেভিগেট করার ../../../পরিবর্তে আমাকে ব্যবহার ../করতে হবে । '/users''/users/1'

— নেলসন 6e65

49

এটি বসন্ত 2017 হিসাবে আমার জন্য কাজ করে বলে মনে হচ্ছে:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

যেখানে আপনার উপাদান ctor গ্রহণ করে ActivatedRouteএবং Router, নিম্নলিখিত হিসাবে আমদানি করা হয়:

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

— ne1410s
সূত্র

4

তারিখের পরিবর্তে আপনি যে কৌনিক সংস্করণটি ব্যবহার করছেন তা উল্লেখ করা আরও কার্যকর হবে।

— ইশারউড

@ গিরিখাত আমি সম্মত ক্ষমা। যদি আমি সঠিকভাবে মনে রাখি, আমি এটি Angular 4.0.x এর জন্য লিখেছিলাম এবং এটি এখনও 4.3.x. এ কার্যকর ছিল। দুর্ভাগ্যক্রমে আমি এখন

— কৌনিক

@ ne1410s ধন্যবাদ অনেকটা আত্মীয়কে হারিয়েছিল: this.route

— Ian Samz

দ্রষ্টব্য: অলস লোডযুক্ত মডিউলগুলিতে অতিরিক্ত রাউটার বিভাগগুলির সাথে কাজ করবে না। EX:: parentPath'work: queue' (যার বাচ্চারা রয়েছে) এবং বলেছে বাচ্চারা প্যারামিটারগুলি সহ শিশু মডিউলটি লোড করে। fullCurrentPath: 'ওয়ার্ক / শিপিং / মডিউল / তালিকা'। উপরের কোড লোড করতে পারব না parentPathথেকে fullCurrentPath।

— ডন থমাস বয়েল

34

আপনি আপনার পিতা-মাতাকে এইভাবে নেভিগেট করতে পারেন

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

আপনাকে নির্মাণকারীর বর্তমান সক্রিয় রুটটি ইনজেকশন করতে হবে

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

— ক্রিস ল্যামোথ
সূত্র

4

কিছু ব্যাখ্যা যুক্ত করা এই উত্তরটি আরও দরকারী করে তুলবে।

— সাগর জালা

অনেকে এই.রোটার.ন্যাভিগেট ([".. / ভাইবোন"], {আপেক্ষিকত: this.route}) দ্বারা ভাইবোন নেভিগেট করার পরামর্শ দেয়; তবে এটি আর কাজ করছে না not আমি এই উত্তরটি সম্ভবত খুঁজে পেয়েছি। পরিবর্তে '../' ব্যবহার করতে পিতামাতায় নেভিগেট করতে। আত্মীয়টিকে এই.আরউলেট থেকে এই.আরউটি.প্রেটিটে পরিবর্তন করুন সঠিক উপায়

— টেরি লাম

4

@ ক্রিসলামোথ: ওহ হ্যাঁ আমি ভুল করেছিলাম। এটি সাধারণ ক্ষেত্রে কাজ করে। তবে এটি সহায়ক পথে কাজ করে না। এর অর্থ হ'ল this.router.navigate (['../ sibling']) কাজ করছে তবে this.router.navigate ([{আউটলেটস: {'গৌণ': ['../sibling']}}]) নয়। সহায়ক রাউটিংয়ে, আমাকে this.router.navigate ([{আউটলেটস: {'মাধ্যমিক': ['ভাইবোন']]}}], {আপেক্ষিক: এই.অ্যাক্টিভেটরউউট.প্যারেন্ট}) ব্যবহার করতে হবে।

— টেরি ল্যাম

4

এছাড়াও, এই উত্তর থেকে নেভিগেশন পদ্ধতি this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});কোনও ক্ষেত্রে সঠিকভাবে কাজ করবে, যখন আপনি একই পন্থা দুটি পথে ব্যবহার করেন: / ব্যবহারকারী / তৈরি করুন এবং / ব্যবহারকারী / সম্পাদনা / 123। উভয় ক্ষেত্রেই এটি পিতামাতার / ব্যবহারকারীদের নেভিগেট করবে। নিয়মিত নেভিগেশন কেবল this.router.navigate([".."], {relativeTo: this.activeRoute})ব্যবহারকারী / তৈরির জন্য কাজ করবে তবে এটি ব্যবহারকারীর পক্ষে / সম্পাদনা / 123 কাজ করবে না কারণ এটি বিদ্যমান নেই / ব্যবহারকারী / সম্পাদনা / রুটে নেভিগেট করবে।

— রোগানিক

4

একটি বিকল্প কিন্তু ব্যক্তিগতভাবে জন্য +1, আমি একটি বাইট শিকারী একটি বিট আছি এবং প্যারামিটারে একটি অতিরিক্ত ডট বিনিয়োগ করবে, [ ".."] , পিতা বা মাতা রেফারেন্স, নির্মূল করার {relativeTo: this.route} ।

— কনরাড ভিল্টারস্টন

7

constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

রাউটার সমর্থন করে

পরম পাথ /xxx - মূল উপাদানটির রাউটারে শুরু হয়েছিল
আপেক্ষিক পথ xxx - বর্তমান উপাদানটির রাউটারে শুরু হয়েছিল
আপেক্ষিক পাথ ../xxx- বর্তমান উপাদানটির মূল রাউটারে শুরু হয়েছিল

— গন্টার জ্যাচবাউয়ার
সূত্র

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এটি কীভাবে প্রশ্নের উত্তর দেয় সে সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করে এর দীর্ঘমেয়াদী মানকে উল্লেখযোগ্যভাবে উন্নতি করবে। কিছু ব্যাখ্যা যুক্ত করতে দয়া করে আপনার উত্তরটি সম্পাদনা করুন।

— টবি স্পিড

4

@ টবিস্পাইট মেলা যথেষ্ট। আমি ধরে নিয়েছি ../যথেষ্ট পরিচিত, কিন্তু শেষ পর্যন্ত এটি এখনও অস্পষ্ট। ইঙ্গিতটির জন্য ধন্যবাদ।

— গন্টার জ্যাচবাউয়ার

4

উত্তরের জন্য ধন্যবাদ, আমি বেশ কিছুদিন ধরে এই ওয়েবসাইটে কাজ করছি, সুতরাং কৌণিক হিসাবে স্পষ্টতই আপডেট হয়েছে updated আমি আমার বর্তমান সংস্করণে এই সমাধানটি চেষ্টা করেছি এবং এটি কার্যকর হয় না। আমাকে আপডেট করুন এবং আমি পরে মন্তব্য করব।

— কার্ল বোইসভার্ট

4

আমি আপনার কোডটি প্রত্যাশার মতো কাজ করতে পাই না। যাইহোক, স্পষ্টভাবে যোগ করে , নেভিগেট করার জন্য কলটিতে দ্বিতীয় প্যারামিটার হিসাবে {আত্মীয়তা: this.route ,, এটি কাজ করে। আপনার উত্তরগুলিতে সাধারণত নির্ভুলতার একটি চূড়ান্ত ডিগ্রি থাকে না তা যদি আমি না থাকি তবে আমি এটি একটি বোকা টাইপো পর্যন্ত চক করব। উত্তরটি সরবরাহ করার পর থেকে এটি কি রাউটারের আচরণে পরিবর্তন হতে পারে (৩.6 বছর আগে, যা কৌণিক বছরগুলিতে অর্ধেকের অনন্তকাল মতো)?

— কনরাড ভিল্টারস্টেন

এটি একটি পুরানো উত্তর এবং এই সময়ে রাউটারটি অনেকটাই বদলেছে। আমি মনে করি যে আমার উত্তরটি সবেমাত্র পুরানো। আমি এত বেশি ওয়েব ইউআই স্টাফ আর করছি না এবং আমার মাথার শীর্ষে সমস্ত বিবরণ নেই।

— গন্টার জ্যাচবাউয়ার

6

বর্তমান রুটে বা প্যারেন্ট রুটে প্যারামিটারের সংখ্যা নির্বিশেষে প্যারেন্ট উপাদানগুলিতে নেভিগেট করতে : কৌণিক 6 আপডেট 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

এটির সিঙ্গেলটন রাউটারের সাথে আপনি ব্যবহার করতে পারেন এমন পরম রুট হওয়ার যুক্ত বোনাস রয়েছে।

(নিশ্চিতভাবে কৌণিক 4+, সম্ভবত কৌনিক 2ও)

— কযেটিয়া
সূত্র

অদ্ভুতভাবে, এটি সর্বদা একটি খালি অ্যারে ফেরত দেয় এবং পিতৃত রুটের সাথে নেওয়ার this._router.navigate([])সময় একই ফলাফলটি অর্জন করে this._router.navigate([[]]), যদি এবং কেবল পিতৃত রুট নিজেই রুট না হয়।

— আশীষ ঝনওয়ার

কৌণিক changes টি পরিবর্তনগুলি প্রতিবিম্বিত করার জন্য আপডেট কোড এবং রুটে বাচ্চাদের সমন্বিত অভিভাবক এবং সন্তানের সাথে সঠিক পিতামাতার সন্ধান।

— ডন টমাস বয়েলে

আপনি কি নিশ্চিত যে এটি আপনার ব্যবহারের ক্ষেত্রে নির্দিষ্ট কিছু নয়? মনে হচ্ছে এটি শেষের পথটি সংযোজন করা ['অর্ডার', '123', 'আইটেম', 1 ]কে কেবল ['আদেশ'] তে পরিণত করবে যা একেবারেই ঠিক মনে হয় না। যাই হোক না কেন, আমরা মাত্র 5 থেকে 7 এঙ্গুলার থেকে গিয়েছিলাম এবং এই কোডিংটি স্পর্শ করি নি।

— কায়েজতে

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

— বজেন্দ্র সিং মন্ডলাই

4

আর একটি উপায় এটি হতে পারে

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

এবং এখানে নির্মাণকারী

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

— জোহানসার্ক
সূত্র

4

অনেক বেশি আদায় ছাড়াই:

this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});

প্যারামিটার '..' নেভিগেশনকে এক স্তর উপরে তোলে, অর্থাত্ পিতামহ :)

— ইগর জিনিন
সূত্র

আপনি এড়িয়ে যেতে পারেন SkipLocationChange এর উদ্দেশ্য / প্রয়োজনের কথা ।

— কনরাড ভিল্টারস্টেন

1

আমার রুটের এই ধরণের নকশা রয়েছে:

ব্যবহারকারী / সম্পাদনা / 1 -> সম্পাদনা করুন
ব্যবহারকারী / তৈরি / 0 -> তৈরি করুন
ব্যবহারকারী / -> তালিকা

উদাহরণস্বরূপ, যখন আমি সম্পাদনা পৃষ্ঠায় থাকি এবং আমাকে তালিকার পৃষ্ঠায় ফিরে যেতে হবে, আমি রুটটিতে 2 স্তরের উপরে ফিরে আসব।

সে সম্পর্কে চিন্তাভাবনা করে, আমি একটি "স্তর" পরামিতি দিয়ে আমার পদ্ধতি তৈরি করেছি।

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

সুতরাং, সম্পাদনা থেকে তালিকায় যেতে আমি এই পদ্ধতিটিকে কল করি:

this.goBack(2);

— কার্লিনহোস
সূত্র

0

আপনি যদি uiSref নির্দেশিকা ব্যবহার করে থাকেন তবে আপনি এটি করতে পারেন

uiSref="^"

— জুরিয়েল
সূত্র

0

আমার সমাধানটি হ'ল:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

এবং Routerইনজেকশন:

private readonly _router: Router

— anlijudavid
সূত্র

0

এর কোনওটিই আমার পক্ষে কাজ করেনি ... আমাকে ব্যবহার করতে হয়েছিল:

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

private router: Router

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

— দিমিত্রি দেদুস ওডিসাউন্ড
সূত্র

কেন এটি কাজ করে তা দয়া করে আপনার উত্তরটি কিছু ডেসক্রিটনের সাথে আপডেট করুন। কিভাবে উত্তর দিতে দয়া করে দেখুন ।

— জেরাল্ড জেহ্তনার

-2

আপনার কনস্ট্রাক্টর থেকে অবস্থান যুক্ত করুন @angular/common

constructor(private _location: Location) {}

পিছনের ফাংশন যুক্ত করুন:

back() {
  this._location.back();
}

এবং তারপরে আপনার দৃষ্টিতে:

<button class="btn" (click)="back()">Back</button>

— ব্যবহারকারী 3021615
সূত্র

4

এটি কেবল তখনই কাজ করে যদি আপনি পূর্বে অভিভাবকত্বের পথে থাকতেন। মূল রুটগুলির ব্রাউজারের ইতিহাসের সাথে কোনও সম্পর্ক নেই ...

— লিবিয়াথনবাদার

এটি আবার নেভিগেট করে, তবে উপাদানটির

— পিতামাত্রে

এটি ব্যবহার করা উচিত নয়, যদি ব্যবহারকারী কোনও বাহ্যিক সাইট থেকে উপাদানটিতে যান, তবে সেটিকে আবার সেই সাইটে নেওয়া হবে। এই কোডটি ব্রাউজারে ফিরে আসা বোতামটি ক্লিক করার মতো

— T04435