TypeScript - Angular 2 - איך אני נווט לכתובת אחרת באמצעות this.router.parent.navigate('/about')?

Angular 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('[email ', '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');

       });
   }
 }

תשובה #1

נתיב מוחלט

ישנן שתי שיטות לניווט, .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']
• פרמטרי נתיב חובה ואופציונליים שנכנסים ל-URL של הנתיב. ['/hero', hero.id] או ['/hero', { id: hero.id, foo: baa }]

תחביר בדומה להכונן

הנתב תומך בתחביר הדומה לתיקיות ברשימת פרמטרי קישור כדי לסייע במציאת שם הנתיב:

./ או בלי סלאש בהתחלה יחסית לרמה הנוכחית.

../ על מנת לעלות רמה אחת במסלול הנתיב.

אתה יכול לשלב תחביר ניווט יחסי עם נתיב של ייחוס אבות. אם עליך לנווט לנתיב של אח, תוכל להשתמש בקונבנציה ../<sibling> כדי לעלות רמה אחת, ואז לעבור ולרדת לנתיב של האח.

הערות חשובות על ניווט יחסי

כדי לנווט בנתיב יחסי עם השיטה Router.navigate, עליך לספק את ActivatedRoute כדי לתת לנתב ידיעה על מיקומך בעץ הנתיבים הנוכחי.

לאחר מערך פרמטרי הקישור, הוסף אובייקט עם מאפיין relativeTo שהוגדר ל-ActivatedRoute. לאחר מכן, הנתב מחשב את כתובת ה-URL היעדית על סמך המיקום של הנתיב הפעיל.

מתעוד המסמך הרשמי של Angular Router

תשובה #2

אתה צריך להשתמש

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

בנוסף לציון נתיב הנתיב, אתה יכול גם לציין את שם הנתיב שלך:

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

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

תשובה #3

ניתן גם להשתמש ללא parent

אמר הגדרת נתב כמו:

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

אז ניתן לנווט לפי name במקום path

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

עודכן לגרסה V2.3.0

בנתיב ב-Routing מגרסה 2.0 נכס name כבר לא קיים. הנתיב מוגדר ללא נכס name. לכן עליך להשתמש ב-path במקום ב-name. this.router.navigate(['/path']) ו-ללא סלאש בתחילת הנתיב, לכן יש להשתמש ב-path: 'about' במקום ב-path: '/about'

הגדרת נתב כמו:

{path:'about', component: AboutComponent}

אז ניתן לנווט לפי path

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

תשובה #4

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

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